gpt4 book ai didi

html - 有一个奇怪的 css 问题,div 中的文本没有随 div 移动

转载 作者:行者123 更新时间:2023-11-27 23:54:10 26 4
gpt4 key购买 nike

伙计们

我有一个存在奇怪问题的简单页面。就连两位资深的前端开发人员也摸不着头脑。下面是代码,非常简单易懂

        <html>
<head>
<style type="text/css">
body
{
padding-left:250px;
}

#box1
{
width:150px;
height:150px;
background-color:#063;
margin-bottom:10px;
text-align:center;
line-height:150px;
float:left;
}

#box2
{
width:150px;
height:150px;
background-color:#00F;
margin-bottom: 15px;
text-align:center;
line-height:150px;
}
#box3
{
width:150px;
height:150px;
background-color:#FC3;
text-align:center;
line-height:150px;
}
</style>
</head>

<body>
<div id="box1">box1 green</div>
<div id="box2">box2 blue</div>
<div id="box3">box3 yellow</div>
</body>

</html>

因为#box1是float:left,所以它会在页面的顶部,#box2应该是不可见的(被#box1覆盖)。

但是,当我从 firefox/chrome 查看它时,我可以看到#box2 的文本仍然可见并且文本的位置不正确。

我想知道为什么文本是可见的并且在错误的位置以及如何修复。

非常感谢您的帮助。

谢谢卢克

最佳答案

DEMO

试试上面的链接。只需为您的 box1 设置位置。

    position:absolute

它工作正常。

原因:

由于您不使用任何位置,它将被视为静态位置而不是默认位置。

静态定位:页面流的一部分。正常滚动。没有位置变化。

绝对定位:它超出了页面流。它通常从原来的位置[0,0]移动。

关于html - 有一个奇怪的 css 问题,div 中的文本没有随 div 移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25072425/

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