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

Swarm413
  • 57

在菜鸟百科上看到:"相对定位元素经常被用来作为绝对定位元素的容器块"为什么这样呢。百度上面没有例子,有没有哪位大佬举个例子呢?
感谢各位大佬的回答。
我做下补充,问题源自前天查看菜鸟教程的原生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之后

回复
阅读 636
5 个回答

问题解决了
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元素的位置,保证真个元素块只在内部变动,而不影响外部其它元素的位置

sunxiongtong
  • 2
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏