css的position特性特定了元素的精准定位种类，随后根据top，botton，left，right来实际精准定位。
在实际精准定位以前务必应用position特性，不然全部的实际精准定位特性都没法起效。
position可挑选的值1共5个：static ，relative，absolute，fixed，或sticky。
下面博主将11开展含编码和运作結果的比照解释
最先是不设定position特性，能够看到two元素的top的特性仍未起效，而色调特性是合理的，当今部位是默认设置文本文档流中的部位，以此为原形比照position更改时的元素部位的转变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<link rel="stylesheet" href="./j.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</div>
</body>
</html>
.box {
display: inline-block;
background: red;
color: white;
}
#two {
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
position：static
在#two的类下加上position：static;以下（后边每处只改动position的值）
#two {
position:static;
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
HTML元素的默认设置值，即沒有精准定位，元素出現在一切正常的流中。
静态数据精准定位的元素不容易遭受 top, bottom, left, right危害。
这个值既然会使精准定位特性无效，那末它存在的实际意义是甚么的？
在网页页面款式改动的全过程中，能够临时的屏蔽一些元素的部位信息内容，或在改动的情况下，保存，一些一部分的部位信息内容，便于修复。
position：relative
相对性精准定位，相对性与原先一切正常文本文档流的部位精准定位，可是在精准定位时不更改原先的网页页面合理布局，既是非常于只是把精准定位的元素开展了挪动，而挪动的比照规范部位便是一切正常文本文档流中的部位，而原先的部位会留白。
position ：absolute
肯定精准定位，该元素将从一般文本文档流中删掉，而且不容易为网页页面合理布局中的元素建立室内空间。他相对近期已精准定位的父元素精准定位。事例中就是依据body元向来精准定位的。
position ：fixed
固定不动精准定位，所谓固定不动精准定位和肯定精准定位类似，1样都会从一般文本文档流中删掉，而且不容易为网页页面合理布局中的元素建立室内空间；不1样的是它是固定不动在视窗上的，是以视窗为精准定位目标的的，坚信大伙儿访问许多网页页面时都有这样的体会，网页页面上部或下部会有广告宣传不容易伴随着网页页面的左右翻转而挪动，它们是固定不动在网页页面上的，而且假如沒有设定z-index来修该叠放顺序，它们会遮盖网页页面的內容。
position ：sticky
该元素其实不摆脱文本文档流，依然保存元素本来在文本文档流中的部位。
当元素在器皿中被翻转超出特定的偏位值时，元素在器皿内固定不动在特定部位。亦即假如你设定了top: 20px，那末在sticky元素抵达间距相对性精准定位的元素顶部50px的部位时固定不动，已不向上挪动。
元素固定不动的相对性偏位是相对离它近期的具备翻转框的父元素，假如父元素都不能以翻转，那末是相对viewport来测算元素的偏位量
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 如何创建网站_免费网站建站_网站建设文章_网站建设7个基本流程_自动建站 版权所有 （网站地图） 粤ICP备10235580号