gpt4 book ai didi

html - 当你把一个相对元素放在一个绝对元素中时会发生什么?

转载 作者:太空宇宙 更新时间:2023-11-04 03:50:34 26 4
gpt4 key购买 nike

绝对:完全忽略流。相对:在正常流的上下文中,但也可以四处移动。

这会按预期在红色框内显示一个绿色框。

<html>
<head>
<title>Lets see what occurs</title>
<style>
#box_1 {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
bottom: 0px;
background:red;
}

#box_2 {
position: absolute;
top: 100px;
bottom: 100px;
left: 40px;
right: 0px;
background:green;
}

</style>
</head>
<body>
<div id="box_1"><div id="box_2"></div></div>

</body>
</html>

这怎么会失败呢?

<html>
<head>
<title>Lets see what occurs</title>
<style>
#box_1 {
position: absolute;
top: 100px;
left: 100px;
right: 0px;
bottom: 0px;
background:red;
}

#box_2 {
position: relative;
top: 100px;
bottom: 100px;
left: 40px;
right: 0px;
background:green;
}

</style>
</head>
<body>
<div id="box_1"><div id="box_2"></div></div>

</body>
</html>

最佳答案

相对位置:即使移动了相对定位的元素的内容,在正常流中仍保留该元素的预留空间。

绝对位置:使用绝对定位,元素可以放置在页面的任何位置。下面的标题距离页面左侧 100 像素,距离页面顶部 150 像素。

关于html - 当你把一个相对元素放在一个绝对元素中时会发生什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23460935/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com