【CSS】为什么说相对定位元素经常被用来作为绝对定位元素的容器块呢？

在菜鸟百科上看到:"相对定位元素经常被用来作为绝对定位元素的容器块"为什么这样呢。百度上面没有例子，有没有哪位大佬举个例子呢？
感谢各位大佬的回答。
我做下补充，问题源自前天查看菜鸟教程的原生css3的响应式导航栏，其中dropDown里面并没有使用position:relative;但是子元素使用了position:absolute.但是当父元素dropDown添加position:relative时，子元素就不正确显示了，这使我百思不得其解。
为什么绝对元素的父元素添加position:relative，子元素反而不正确显示呢？
源码

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover, .dropdown:hover, .dropbtn {
    background-color: #111;
}
.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>
<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
</body>
</html>

image添加positon:relative之后

回答：

问题解决了
1.绝对定位元素是相对于position不为static的父元素定位的，如果没有就会相对于body定位。因此，为了布局美观，将绝对元素的父元素设定为relative,这样父元素没有偏移，子元素也能定位
2.问题中的导航栏，绝对定位元素有个很有趣的特点，如果仅仅设定了position:absolute,而没有设定top,left或者bottom,right.那么它会呆在父元素的左上角。如果父元素里面还有一个元素（比如p）那么绝对定位元素会老老实实呆在父元素内部，p元素下面。当然，如果你设定了top,left那么绝对定位元素就会相对于body定位。这就是导航栏的答案

回答：

绝对定位的元素外层如果没有相对定位的元素，它就会已body来相对定位。比如

QQ图片20200804113838.png

圆是图标，采用 绝对定位，定位到右边竖直对齐，设置 top 10和 right 10。外层的div就需要 相对定位，不然 所有的 圆图标 就会 全部跑到同一个位置上去

回答：

首先得明确position:absolute会相对于什么定位。absolute会相对于非static（即relative，absolute，fixed,sticky）得外层元素进行定位。一般我们的position默认值为static。也就是说，如果你设置了一个元素的position为absolute，而他的父元素或者祖元素position都是默认值，他是会相对于body进行定位的。而大多数我们使用absolute时，只是想让相对于某一个非body的具体元素定位。同时，我们不想让这个具体元素不脱离正常文档流，但是从position的取值来看，不脱离文档流的设置只有static,relative。在加上absolute的相对定位原则，只有给具体元素设置position:relative。这样，这个元素不会脱离文档流，position为absolute的元素也能相对它进行定位。

回答：

  1. 元素的position:absolute是相对于离其最近的定位父容器块(containing block)元素
  2. 定位容器块元素是指position属性值为relative、absolute、fixed、sticky，也就是非static
  3. relative相对其static的位置进行left、right、top、bottom偏移
  4. fixed相对于viewport进行定位，和其父容器的position属性无关
  5. sticky和其父容器的滚动属性设置相关，起到滚动吸附到容器特定位置的特性

position:relative常用作position:absolute元素的父容器元素时既能保持容器元素的位置不变，同时能灵活设置position:absolute元素的位置，保证真个元素块只在内部变动，而不影响外部其它元素的位置

回答：

image.png
css:
`.parent {

        width:200px;
        height: 200px;
        background: green;
        position: relative;
    }
    .children {
        width: 100px;
        height: 100px;
        position: absolute;
        background: pink;
        left: 50px;
        top: 100px;
    }
`
html：
`
<div class="parent">
    parent
    <div class="children">children</div>
</div>
`

你理解为定位是基于parent盒子的边界就行了，left：50px 是基于做边框50px，top：100px,基于上边界100px

以上是 【CSS】为什么说相对定位元素经常被用来作为绝对定位元素的容器块呢？ 的全部内容， 来源链接： utcz.com/a/154762.html

回到顶部