如何解决为什么要显示2个元素:inline-block;位置:绝对;彼此重叠而不是彼此相邻?
我知道我应该使用position:relative;这样就遵循了这两个元素的内联块行为,因此它们不会重叠,并且因为每个元素都被识别为块而被并排内联
但是我很好奇,当位置为绝对值时,它不再将该元素识别为块并允许重叠,为什么呢?
例如1:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Hello </title>
</head>
<body>
<div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
<div class="red" style="display:inline-block; background-color:red; height:100px; width:100px; position: absolute;"></div>
<div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: absolute; left:20px;"></div>
</div>
</body>
</html>
2:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Hello </title>
</head>
<body>
<div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
<div class="red" style="display:inline-block; background-color:red; height:100px; width:100px;
position: relative;"></div>
<div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: relative;"></div>
</div>
</body>
</html>
解决方法
具有绝对位置的元素不在正常流程中。文档流是CSS定位语句定义的页面元素的排列以及HTML元素的顺序。也就是说,每个定义如何占用空间以及其他元素如何相应地定位自己。看一下:https://soulandwolf.com.au/blog/what-is-document-flow/#:~:text=by%20John%20Rosato,other%20elements%20position%20themselves%20accordingly。还有这个https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
,将其设置为绝对定位时,此元素将找到具有定位位置的最近的父元素。相对定位是指此元素相对于其位置的变化。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。