CSS-position定位
Posted HTML基础
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS-position定位相关的知识，希望对你有一定的参考价值。
CSS的position定位概念了解一下。
Position的属性们
html元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
【HTML标签中有块级元素和内联元素，块级元素要独占一行，内联元素和其他内联元素】
相对定位元素的定位是相对其正常位置。
相对于原来位置的前后左右的移动。
【比如你的初始位置在桌子前，然后你跑去摊在沙发上，桌子的位置就是本来的正常位置，沙发的位置就是你相对于你原来的位置的移动】
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
应用一般是首页的导航条，往下滚动也依旧处于浏览器顶部位置。
【不管滚动条怎么滚，有fixed属性的元素都在浏览器窗口的固定位置，导航条和侧边栏很多时候都有这个属性，有的讨厌的小广告也有这个属性】
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
*已定位的父元素指的是首先是父元素，其次是有position:relative属性。
【父元素就相当于一个小房子，被绝对定位的元素就是房子里的家具，你可以控制它在房子的哪个位置】
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
【这个我没用过，不太懂有啥用，看了下演示效果觉得就很普通，有大神可以告诉我它的使用场景么？】
应用一下下
先写一个框架出来
效果如下
fixed应用
.box1{
background-color: red;
position: fixed;
top: 0px;
-width:100%;
}
效果如下
我们可以看到，box1加上position:fixed属性后长度变为由内容长度撑开，如果想要让它和浏览器一样长要设置它的长度width:100%。
其次加上这个属性之后box1脱离了文档流，原来的box2占据它原来的位置，需要设置box2的属性使它显露出来。
relative应用
.box2{
background-color: orange;
position: relative;
top: 50px;
}
效果如下
我们可以看到3并没有占据原来2的位置，所以relative是没有脱离文档流的。
static应用
.box3{
background-color: yellow;
position: static;
top: 100px;
left: 50px;
}
效果如下
我觉得static基本没啥用，设置了也不能改位置，不脱离文档流。
设置left/top/right/bottom没有作用，对margin/padding敏感
【文档流就是按照块级元素和内联元素的规定，从上到下排出来一个文档，块级元素即使内容很少也独占一行（没有内容不占，除非设置宽和高），内联元素由内容撑开，和其他内联元素占一行】
absolute应用
没有设定父元素的情况
.box4{
background-color: green;
position: absolute;
top:15px;
left: 20px;
}
效果如下
我们可以看到5占据原来4的位置，所以absolute是脱离文档流的。没有父元素的时候它的位置是相对于html的。而且它长度也变为由内容长度撑开，需要设置宽度来延长它。
设定了父元素的情况
.box5{
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 50px;
}
.smallbox{
background-color: white;
width:50px;
height: 50px;
position: absolute;
top:0;
left: 0;
right:0;
bottom: 0;
margin: auto;
}
<div class="box5 a">
<div class="smallbox">6</div>5
</div>
效果如下
在有父元素的时候，添加了absolute的元素的位置是相对于父元素的位置走的。在这里展示了一种使元素相对于它的父元素居中的方法，将上下左右的绝对位置设置为0，然后加个margin:auto。
position定位的基本概念和应用就讲到这里，大家给我点个赞吧！
附全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position定位</title>
<style>
body{
height: 1000px;
margin:0;
padding:0;
}
.a{
margin-bottom: 10px;
}
.box1{
background-color: red;
position: fixed;
top: 0px;
width:100%;
}
.box2{
background-color: orange;
position: relative;
top: 50px;
}
.box3{
background-color: yellow;
position: static;
top: 100px;
left: 50px;
}
.box4{
background-color: green;
position: absolute;
top:15px;
left: 20px;
}
.box5{
background-color: blue;
width: 200px;
height: 200px;
position: relative;
left: 50px;
}
.smallbox{
background-color: white;
width:50px;
height: 50px;
position: absolute;
top:0;
left: 0;
right:0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1 a">1</div>
<div class="box2 a">2</div>
<div class="box3 a">3</div>
<div class="box4 a">4</div>
<div class="box5 a">
<div class="smallbox">6</div>5
</div>
</body>
</html>
以上是关于CSS-position定位的主要内容，如果未能解决你的问题，请参考以下文章