html - 定位: absolute的刺激行为

标签 html css css-position absolute

<分区>

据我所知,绝对定位元素和 float 元素已从正常的 html 流中删除(如果我错了请纠正我)。

这是我的 jsFiddle

这是我的代码:

<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>

我的CSS:

.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}

当我在 main-area 中写任何东西时,为什么右侧边栏会向下滑动。

最佳答案

在侧边栏添加一个top属性

.right-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

当指定位置 absolute 时,您需要定位元素,这意味着您必须设置其 topbottomleft right 属性为您想要的值。如果未设置这些属性之一,浏览器会定位它们,因为它们将被设置为 auto

关于html - 定位: absolute的刺激行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18149622/

相关文章:

html - 如何在页眉的每一侧放置图像?

css - 如何正确地将特定列放入 bootstrap 3 网格

java - Flying Saucer 中的外部 CSS

css - 无法在 Spring MVC 应用程序中从 CSS 访问图像文件

html - 如何让位置 :absolute <div> expand, 好像包含一个长 <p>

css - 我无法在我的代码中正确定位此元素。有人可以帮我发现错误吗?

html - Chrome 上的单选按钮显示

javascript - 半响应图像取决于宽度

javascript - const ddk = document.querySelector ('#ddk > input' );不起作用?只在控制台中显示 null

html - 为什么这些内联 block div 会换行,尽管它们的父级有溢出 x :scroll?