位置元素内绝对位置

我有3个元素，#app,#main-section是#app和#magazine-detail里面#main-section。当#app设置为position：relative时，如何在#magazine-section内定位#magazine-detail？而#magazine-detail设置为position：absolute;？位置元素内绝对位置

这是CSS：

#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

#main-section { 
    position: absolute; 
    top: 77px; 
    left: 0; 
    width: 100%; 
}

整个HTML太大了，所以我张贴只是一个短版，希望你能得到的图片：

<div id="app"> 

    ... 
    <div id="main-section"> 
     ... 
     <div id="main-section"> 
     ... 
     </div> 
    </div> 

</div>

我需要从位置 main section的底部。我试图与位置来定位它：绝对喜欢，建议做的，是这样的：

#magazine-detail { 
    position: absolute; 
    bottom: 30px; 
}

但随后的元件位置莫名其妙地从顶部和底部没有30PX？

来源

2016-10-25 Marco

请指明你想达到什么 - 你在做什么，应该是什么结果，什么是不是预期的结果 – eithed

[定位多个嵌套的div相对于彼此]（http://stackoverflow.com/questions/16809076 /定位 - 多嵌套divs相对于彼此） – Thamilan

我猜下面是YOUT HTML

<div id="app"> 
    <div id="main-section"> 
     <div id="magazine-detail"></div> 
    </div> 
</div>

你#app是相对的，main-section是绝对相对于app。事情是，如果你在css中也设置了绝对的magazine-detail，它将被定位为相对于main-section。

下面是一个工作示例：

#app { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 200px; 
 
    padding: 5px; 
 
    border: 2px solid red; 
 
} 
 
#main-section { 
 
    position: absolute; 
 
    height: 80%; 
 
    width: 80%; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    top: 15px; 
 
    left: 15px 
 

 
} 
 
#magazine-detail { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 1px dotted green;  
 
    bottom: 30px; 
 
}

<div id="app"> 
 
    <div id="main-section"> 
 
    <div id="magazine-detail"></div> 
 
    </div> 
 
</div>

来源

2016-10-25 07:32:10 user31782

@Marco我已经添加了一个工作示例。 – user31782

试试这个：

#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border:1px solid #eee; 
} 

#main-section { 
    position: absolute; 
    top: 77px; 
    left: 0; 
    width: 100%; 
    height:400px; 
    border:1px solid #ccc; 
} 

#magazine-detail { 
    position: absolute; 
    border:1px solid #ff0000; 
    width:400px; 
    bottom:30px; 
}

HTML：

<div id="app"> 
    <div id="main-section"> 
     <div id="magazine-detail"> 
     This is the test<br> 
     This is the test<br> 
     This is the test<br> 
     This is the test<br> 
     This is the test 
     </div> 
    </div> 
</div>

的位置绝对位置的元素按父容器的位置，所以为了使你的＃主部和＃杂志详细位置绝对，在#APP应该相对被定位。

来源

2016-10-25 07:42:20 adi

位置元素内绝对位置

回答

相关问题