绝对位置，但相对于父位置

HTML CSS

Elena镜风

2020-03-18

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

范例html：

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

第2194篇《绝对位置，但相对于父位置》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
西门米亚 2020.03.18

如果您不给父母任何职位，那么默认情况下会采取static。如果您想了解这种差异，请参考此示例

示例1：

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

   #mainall
{

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

在此，父类没有位置，因此根据正文放置元素。

示例2：

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

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

在此示例中，父级具有相对位置，因此元素绝对位于相对父级内部。

ProAGil 2020.03.18 
div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}
LEYPro前端 2020.03.18

如果有人想将孩子div直接放在父母的下面

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

工作演示Codepen

ㄏ囧囧ㄟ 2020.03.18 
#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

这工作，因为position: absolute手段类似“使用top，right，bottom，left来定位自己相对于谁拥有最近的祖先position: absolute或position: relative”。

因此，我们使#fatherhave position: relative和子代都有position: absolute，然后使用top和bottom定位子代。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android