码迷,mamicode.com
首页 > Web开发 > 详细

有关css中position其中的语法以及结论

时间:2018-09-27 18:44:56      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:flow   loss   实例   eve   一个   round   href   设置   http   

position是 CSS属性指定的元素如何定位一个文件内toprightbottom,和left属性确定定位元素的最终位置。

形式语法:静态的| 亲戚| 绝对的 |粘性| 固定

静态:元素根据文档的正常流程定位。toprightbottomleft,和z-index性能有任何影响这是默认值。

亲戚:该元件根据文档的正常流动定位,然后偏移相对于它本身的基础上的值toprightbottom,和left偏移量不会影响任何其他元素的位置; 因此,页面布局中为元素给出的空间与位置相同static当值不是时,此值将创建新的堆叠上下文

绝对的:该元素将从普通文档流中删除,并且不会为页面布局中的元素创建空间。它相对于其最近的祖先(如果有的话)定位; 否则,它相对于初始包含块放置其最终位置是由的值确定的toprightbottom,和left当值不是时,此值将创建新的堆叠上下文绝对定位框的边距不会与其他边距一起折叠

粘性:该元素将从普通文档流中删除,并且不会为页面布局中的元素创建空间。它相对于所述初始位置包含块通过所建立的视口除了当它的祖先中的一个具有,transformperspective,或filter属性设置为比其他的东西none(见CSS转换规格),在这种情况下祖先表现为包含块。(请注意,存在与浏览器的不一致性perspectivefilter有助于包含块的形成。)其最终位置是由的值确定的toprightbottom,和left此值始终创建新的堆叠上下文在打印文档中,元素放置在每个页面上的相同位置

固定:该元件根据文档的正常流动定位,然后偏移相对于它的最近的祖先滚动包含块(最接近的块级祖先),包括表相关的元素的基础上的值toprightbottom,和left偏移量不会影响任何其他元素的位置。此值始终创建新的堆叠上下文需要注意的是粘性元素“大棒”,以具有“滚动机制”,其最近的祖先(创建时overflowhiddenscrollauto,或overlay),即使祖先是不是最近的实际滚动的祖先。这有效地抑制了任何“粘性”行为。

实例:html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="09211position.css">
<title>grid</title>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

</body>
</html>

css:

#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
background-color: green;
width: 50px;
height: 50px;
}

有关css中position其中的语法以及结论

标签:flow   loss   实例   eve   一个   round   href   设置   http   

原文地址:https://www.cnblogs.com/zj1997/p/9714802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!