定位position

来源：互联网发布：数据库设计教程 pdf 编辑：程序博客网时间：2024/05/21 07:53

position六个属性值：static、relative、absolute、fixed、sticky和inherit。

static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分;行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移;一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>sticky</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>    nav{        position:sticky;        top:8px;        background: red;        width: 200px;        height: 200px;    }    p{        height: 100000px;    }</style></head><body><div id="altContent">    <nav></nav>    <p>sdlfjsldkfjsldkfjsdddddddddddd</p></div></body></html>

阅读全文

0 0