绝对位置但相对于父级

Posted 2023-03-04

【中文标题】绝对位置但相对于父级

【英文标题】：Position absolute but relative to parent

【发布时间】：2012-05-16 06:26:37

【问题描述】：

我在另一个 div 中有两个 div，我想使用 css 将一个子 div 放置在父 div 的右上角，将另一个子 div 放置在父 div 的底部。即，我想对两个子 div 使用绝对定位，但相对于父 div 而不是页面定位它们。我怎样才能做到这一点？

示例 html：

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

【问题讨论】：

您希望儿子 1 位于父亲的右上角，但儿子 2 应该在底部的哪个位置？左下、右下还是中间？

在这种情况下，您需要设置 position: relative 到父元素， position: absolute 到子元素。在第一个子元素上，你应该把 top: 0 和 right: 0 放在父元素的右上角。在第二个孩子上，你应该把 bottom: 0 放在父元素的底部。这里有一篇很棒的文章kolosek.com/css-position-relative-vs-position-absolute详细解释了相对和绝对定位。

【参考方案1】：

在需要粘性浮动“后退按钮”/“返回顶部”按钮的用例中。但是您的主要内容区域可以缩小以支持辅助内容区域

您可以在position: absolute; 的容器内使用position: fixed; 来获得类似于sticky 但更强大的更灵活的行为

function toggleOpen() 
  const element = document.getElementById("sideContnet");
  if (element.style.display === "none") 
    element.style.display = "block";
   else 
    element.style.display = "none";
  

.container 
  display: flex;
  margin: 0 auto;
    width: 600px;


.contentBig 
  width: 600px;
  min-width: 66%;
  position: relative;
  

.contentSmall 
  width: 230px;
  min-width: 33%;


.absolute 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;


.fiexBack 
  position: fixed;
  background-color: red;
  bottom: 20px;
  padding: 5px;


.button 
  width: 200px;
  padding: 12px;
  background-color: coral;
  margin: 0 auto;

<button onclick="toggleOpen()" id="toggleSide" class="button">
  toggle open side content
</button>
<div class="container">
  <div class="contentBig">
    <div class="absolute">
      <div class="fiexBack">Back</div>
  </div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
   <div id="sideContnet" class="contentSmall">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
</div>

Full Code Example

【参考方案2】：

如果有人想将子 div 直接放在父级下面

#father 
   position: relative;


#son1 
   position: absolute;
   top: 100%;

工作演示Codepen

【参考方案3】：

如果你不给父母任何位置，那么默认情况下它需要static。如果您想了解这种差异，请参阅此示例

示例 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall


    background-color:red;
    height:150px;
    overflow:scroll

这里父类没有位置，所以元素是根据body放置的。

示例 2::

http://jsfiddle.net/Cr9KB/2/

#mainall

    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll

在这个例子中，父元素具有相对位置，因此元素被绝对定位在相对父元素内部。

【讨论】：

如果你没有#mainallheight:150px...怎么办？我的意思是，如果 mainall 有动态高度？

那么你的浮动元素将相对于页面（和css）加载时父元素的位置。如果您想在页面加载后更新它，请使用 javascript - clientX 和 clientY 是一个很好的起点

【参考方案4】：

div#father 
    position: relative;

div#son1 
    position: absolute;
    /* put your coords here */

div#son2 
    position: absolute;
    /* put your coords here */

【讨论】：

如果您需要调整父母与孩子的大小怎么办？

【参考方案5】：

#father 
   position: relative;


#son1 
   position: absolute;
   top: 0;


#son2 
   position: absolute;
   bottom: 0;

之所以有效，是因为position: absolute 的含义类似于“使用top、right、bottom、left 来定位自己与拥有position: absolute 或position: relative 的最近祖先的关系。”

所以我们让#father 拥有position: relative，而孩子们拥有position: absolute，然后使用top 和bottom 来定位孩子们。

【讨论】：

为什么需要#father position: relative; ？

需要为他里面的人更改“位置规则”。

@mathguy54 因为规范说绝对定位的元素是相对于第一个 positioned 父元素定位的，这意味着任何不具有 static 位置值的父元素。

这样的场景怎么办：父亲是相对的，它的高度是 100% 如何定位儿子和儿子 2，假设分别是父亲身高的 20% 和 70%？

@BruceSun w3.org/TR/CSS2/visudet.html#containing-block-details