java的绝对定位_绝对定位与正确的元素无关

最新推荐文章于 2022-08-24 15:30:52 发布

大机灵聪明绝顶

最新推荐文章于 2022-08-24 15:30:52 发布

阅读量148

点赞数

文章标签： java的绝对定位

本文链接：https://blog.csdn.net/weixin_34580002/article/details/114705507

版权

具有样式contentdetailleft的div是绝对的，因此将使用样式容器定位到div(因为容器是绝对的) . 您可以看到我将左侧设置为0px并将顶部设置为0px只是为了说明这一点 . 如果你运行它，你会看到div与contentdetailleft重叠div与样式contentTop正如你所期望的那样 . 这是HTML：

Charts

html, body {

width: 100%;

height: 100%;

margin: 0px auto;

padding:0;

background-color: blue;

}

h3 {

margin: .5em;

color: black;

}

.container {

width:98%;margin:1%;height:96%;overflow:auto;position:absolute;

}

.containerTop {

width:100%;height:auto;

}

.containerBottom {

width:100%;margin-top:40px;height:auto;

}

.contentheaderleft {

width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;

}

.contentheaderright {

width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;

}

.contentdetailleft {

width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;

}

.contentdetailright {

width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;

}

Widget

Drop Your Widget Here

现在删除contentdetailleft样式的左边：0px和顶部：0px(请参阅下面的HTML) . 现在，具有样式contentdetailleft的div位于具有样式内容底部的div内 . 怎么会这样？