相对定位与绝对定位的分析测试

时间 2020-08-07

原文原文链接

相对定位与绝对定位在咱们制做网页的过程当中应用很频繁。但对于其具体做用的深度分析咱们也是只知其一;不知其二，只管怎么用，无论为何这么用。此次，做为前端萌新的我，对两者进行了以下分析与测试，若有错误，欢迎指导讨教。

相对定位与绝对定位在被定位时。相对定位是相对于自身定位的，且在文本流中保留其本来的位置。而绝对定位是相对于父级定位的，但前提是父级也必须定位，若是父级没有定位，那么子级就会寻找祖父级（即父级的父级）定位，若是祖父也没有定位，那就寻找祖父的父级，若是祖父的父级都没有定位，那就寻找body进行定位。简单说，绝对定位采用就近原则来定位，相对定位选择自身本来所在位置定位。
说了这么多，若是还不明白，那咋们举个例子：
没定位以前：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

相对定位以后：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

绝对定位：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

咱们发现相对定位以后和没定位以前没区别，但在绝对定位以后蓝块跑到了红块的下边。这是怎么回事呢？
由于，在红块相对定位以后，红块保留了它在文本流的位置，虽然浮动起来了，但仍然占着位置，尽管蓝块看上去好像并无什么变化。
但在红块相对定位以后，变化很明显……蓝块跑到了红块的下边。由于红块被相对定位，本来保留在文本流的位置被删除，自己浮了起来，因此蓝块就跑到了红块的下方，很明显，在没有父级的状况下，红块寻找body，相对于body定位了。
同理，若是咱们给蓝块绝对定位，而后在它后方紧跟一个红块呢？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
background-color: red;
width: 200px;
height: 200px;
}
.two {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="one"></div>
</body>
</html>

。咱们会发现，下方的红块跑到了蓝块的下方。由于蓝块被相对定位了，它的位置被删除，红块天然就会跑到蓝块的下方。html
若是在样式嵌套的时候相对定位又会有什么变化呢？
首先，咱们给父级默认浏览器，给子级分别绝对和相对定位。（代码太过冗余，直接上效果图蓝块为子级红块为父级）
父级不定位子级绝对定位：

父级不定位子级相对定位：

父级绝对子级不定位：
前端

父级相对子级不定位：

由图很明显，图并无发生任何改变。这是为何？记住一点，子级永远悬浮在父级之上，哪怕世界末日来临。当父级不定位时，本身不管怎么定位它都悬浮在父级之上。当咱们利用上下左右（tblr）来移动时就可看出来了。蓝块在绝对定位时，是相对于浏览器边框移动的，由于父级没有定位，因此它只能找body来定位。当它相对定位时，它是至关于自身移动的，咱们有时候会产生错觉，它是以浏览器左上角定位的，事实是错的，它是相对与自身定位的。
当子级不定位，父级绝对或相对定位时。这时，咱们能够把父级和本身当作一个整块，父级怎么定位和子级没有半毛钱关系，它始终浮在红块上边。仍是要记住一点，子级永远浮在父级之上（这是重点），要想让本身浮在父级下边，那就给子级设置z-index元素，父级不用设置。
同理，当父级绝对定位，子级相对或绝对定位时。父级相对，子级相对或绝对定位时。这就很好理解了。
咱们能够把他们看做两个层，一个层叫‘父级 ’，一个层叫‘子级’，父级始终包裹着子级（本身始终在父级之上）。父级不定位子级定位就至关于父亲放开怀抱，让子级能够本身玩（即子级能够在浏览器的任何位置移动）定位方式就是参照目标（也就是它想找谁玩，相对就是本身跟本身玩，绝对就是找爷爷或者祖爷爷或者body玩）。父亲定位，就是寓意父亲把家里的大门关上了，里面只有父亲和孩子，孩子要么和本身玩（子级相对定位），要么和父亲玩（子级绝对定位）。至于影响父亲的定位方式，只能是父亲的父亲。
今天就说到这里有什么错误还请你们多多指教！欢迎探讨！浏览器