FlexBox -绝对位置的行为类似于固定
FlexBox -绝对位置的行为类似于固定
提问于 2018-06-08 10:41:49
我有一个非常基本的任务，似乎使用任何一种真正有意义的GUI标记语言都很容易完成。不幸的是，HTML/CSS不是这样的标记语言。
在下面的示例中。我有一个“圣杯”页面布局，在CSS中使用flexbox样式。主布局没问题...它甚至可以很好地滚动。但当我将一个元素添加到具有绝对定位的主体(中心/黄金区域)时，特定元素的位置表现为-如果是固定的，而不是绝对的。在下面的代码中，我将其设置为div 128x128，并将其着色为#00ffff (青色)。一个理智的人会认为div会出现在主体区域的左上角(黄金部分)……然而，flexbox似乎将我的绝对定位视为-如果它被定位为固定的。下面的代码就是演示此问题所需的全部代码。
我需要一个行为符合预期的解决方案。
<body>
<header>
<h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
</header>
<div class="layout__body">
<main class="layout__content">
<div id="absolutepositioned">MESSED UP</div>
<div style="color: #00FFFF;"><b>the blue box should be here</b> </div>
</main>
<nav class="layout__nav layout__columns">
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
</nav>
<aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
</div>
<footer> FOOTER
</footer>
</body>
<style>
body {
display: flex;
flex-direction: column;
}
.layout__body {
display: flex;
flex: 1;
}
.layout__content {
flex: 1;
overflow: auto;
}
.layout__columns {
flex: 0 0 12em;
}
.layout__nav {
order: -1;
}
.layout__content {
background: #3f3f00;
}
.layout__columns {
background: green;
}
header, footer {
background: #000;
color: #fff;
padding: 10px;
}
footer a {
flex: 1;
}
h1 {
margin: 0;
font-size: 15px;
}
html,body {
height: 100%;
margin: 0;
font-family: Helvetica;
}
#absolutepositioned
{
position: absolute;
left: 0;
top: 0;
width: 128px;
height: 128px;
background-color: #00ffff;
}
</style>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-08 10:53:08
绝对定位元素是指其计算位置值为绝对或固定的元素。top、right、bottom和left属性指定从元素包含块的边缘开始的偏移量。(包含块是元素相对于其定位为的祖先。)如果元素有边距，则会将它们添加到偏移量中。
您需要将position: relative添加到您想要相对于其定位元素的祖先，在本例中，该祖先是.layout__content
body {
display: flex;
flex-direction: column;
}
.layout__body {
display: flex;
flex: 1;
}
.layout__content {
flex: 1;
overflow: auto;
position: relative;
}
.layout__columns {
flex: 0 0 12em;
}
.layout__nav {
order: -1;
}
.layout__content {
background: #3f3f00;
position: relative;
}
.layout__columns {
background: green;
}
header,
footer {
background: #000;
color: #fff;
padding: 10px;
}
footer a {
flex: 1;
}
h1 {
margin: 0;
font-size: 15px;
}
html,
body {
height: 100%;
margin: 0;
font-family: Helvetica;
}
#absolutepositioned {
position: absolute;
left: 0;
top: 0;
width: 128px;
height: 128px;
background-color: #00ffff;
}<header>
<h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
</header>
<div class="layout__body">
<main class="layout__content">
<div id="absolutepositioned">FIXED!</div>
<div style="color: #00FFFF;"><b>the blue box should be here</b> </div>
</main>
<nav class="layout__nav layout__columns">
NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br>
</nav>
<aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
</div>
<footer> FOOTER
</footer>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50752597
复制相关文章
相似问题