CSS布局position
position: static; 默认是static，使用static就表示不对元素位置做任何改变。
position: relative
If you save and refresh at this stage, you won't see a change in the result at all. So how do you modify the element's position? You need to use the top, bottom, left, and right properties, which we'll explain in the next section.
position: relative
If you save and refresh at this stage, you won't see a change in the result at all. So how do you modify the element's position? You need to use the top, bottom, left, and right properties, which we'll explain in the next section.
position: relative; top: 30px;
将元素的顶部向下推30px
元素一旦设置了position: absolute; 那它就不在normal layer上了，和别的元素不在一层上了。它有它自己的一层。An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else。
元素一旦设置了position: absolute; 那它就不在normal layer上了，和别的元素不在一层上了。它有它自己的一层。An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else。
position: absolute; top: 30px;
This is very useful: it means that we can create isolated UI features that don't interfere with the layout of other elements on the page. For example, popup information boxes and control menus; rollover panels; UI features that can be dragged and dropped anywhere on the page; and so on...
这个非常有用，那意味着你可以创建独立UI features,而不影响布局上的其它元素。 例如： 弹出的窗口或控制菜单，滑动的控制面板，可以拖放的UI features 等。
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}The initial containing block has the dimensions of the viewport, and is also the block that contains the <html> element. In other words, the absolutely positioned element will be displayed outside of the <html> element, and be positioned relative to the initial viewport.
初始化内容块
换句话说，absolutely positioned element 的显示超出了 <html>, 位置相对初始化的视窗viewport。
绝对定位也可以被限制住， 通过设置他的父类元素为： position: relative; 那么它的子元素是 position: absolute;也只能是相对他的父元素内。
Web pages also have a z-axis: an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen)
网页也有一个z轴，可以想象为屏幕到你脸的这个方向。
设置z-index: 1; 值大的覆盖小的。这个和display: grid里面设置各元素的order有些类似，不过那个order没有
positon定位 和 fixed 固定， 相对屏幕可视区域viewport固定。
fixed positioning usually fixes an element in place relative to the visible portion of the viewport, except if one of its ancestors is a fixed containing block due to its transform property being different from none.
绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。它们相对于视口保持固定在该位置（即，滚动时它们不会移动
position: fixed; 和 position: absolute; 很相似，唯一不同的是， 绝对定位是相对为position: relative的父类的元素的定位或者相对inital containing block, 后面这种就和position: fixed一样了。
position: sticky
后处理的一种混合定位。(relative 和 fixed的混合）
position: sticky, which is somewhat newer than the others. This is basically a hybrid between relative and fixed position,
This can be used to for example cause a navigation bar to scroll with the page until a certain point, and then stick to the top of the page.
常见的有趣的使用sticky的是在滚动页面的时候，不同的heading stick吸在顶部，当你
换句话说，absolutely positioned element 的显示超出了 <html>, 位置相对初始化的视窗viewport。
绝对定位也可以被限制住， 通过设置他的父类元素为： position: relative; 那么它的子元素是 position: absolute;也只能是相对他的父元素内。
Web pages also have a z-axis: an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen)
网页也有一个z轴，可以想象为屏幕到你脸的这个方向。
设置z-index: 1; 值大的覆盖小的。这个和display: grid里面设置各元素的order有些类似，不过那个order没有
positon定位 和 fixed 固定， 相对屏幕可视区域viewport固定。
fixed positioning usually fixes an element in place relative to the visible portion of the viewport, except if one of its ancestors is a fixed containing block due to its transform property being different from none.
绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。它们相对于视口保持固定在该位置（即，滚动时它们不会移动
position: fixed; 和 position: absolute; 很相似，唯一不同的是， 绝对定位是相对为position: relative的父类的元素的定位或者相对inital containing block, 后面这种就和position: fixed一样了。
position: sticky
后处理的一种混合定位。(relative 和 fixed的混合）
position: sticky, which is somewhat newer than the others. This is basically a hybrid between relative and fixed position,
This can be used to for example cause a navigation bar to scroll with the page until a certain point, and then stick to the top of the page.
常见的有趣的使用sticky的是在滚动页面的时候，不同的heading stick吸在顶部，当你
An interesting and common use of position: sticky is to create a scrolling index page where different headings stick to the top of the page as they reach it. The markup for such an example might look like so:
dt {
background-color: black;
color: white;
padding: 10px;
position: sticky;
top: 0;
left: 0;
margin: 1em 0;
}粘滞元素相对于最近的祖先具有“滚动机制”，这是由其祖先的位置属性决定的。
阅读量: 567
发布于:
修改于:
发布于:
修改于: