相对于彼此定位多个嵌套的div [英] Positioning multiple nested divs relative to each other

问题描述

我有一个外部div，divs在外部div和divs里面这些div。我想将最内层的div wrt定位到其父级，中级div wrt定位到其父级，即最外侧的div。对于div内部的div，我们使用父div的相对定位和子div的绝对定位来实现这一点。但是当我们有更多层次的嵌套div时，我们如何实现呢？

我想为最内层的div设置预定义的宽度，其他更高级的div应该有宽度和高度，以适合他们的子div。我有以下代码，但它似乎不工作。代码如下所示：

 < div class ='list'id ='list1'style ='padding：1px; border：5px groove;位置：相对; min-width：3px; width：auto; min-height：3px; height：auto;'> 
< div class ='tuple tuple1'style ='padding：2px; border：1px solid; position：absolute; min-width：3px; width：auto; min-height：3px; height：auto;'> 
< div class ='elmnt'id ='elmnt1'style ='padding：2px; border：1px dotted; position：absolute; left：6px; width：100px;'> adasd< / div> 
< div class ='elmnt elmnt2'id ='elmnt2'style ='padding：2px; border：1px dotted; position：absolute; left：112px; top：2px; width：100px;'> asdasd< / div> 
< div class ='elmnt elmnt3'id ='elmnt3'style ='padding：2px; border：1px dotted; position：absolute; left：218px; top：2px; width：100px;'> asdasd< / div> 
< div class ='elmnt elmnt4'id ='elmnt4'style ='padding：2px; border：1px dotted; position：absolute; left：324px; top：2px; width：100px;'> sadasd< / div> 
< / div> 
< div class ='tuple tuple2'style ='padding：2px; border：1px solid; position：absolute; min-width：3px; width：auto; min-height：3px; height：auto;'> 
< div class ='elmnt'id ='elmnt1'style ='padding：2px; border：1px dotted; position：absolute; left：6px; width：100px;'> adasd< / div> 
< div class ='elmnt elmnt2'id ='elmnt6'style ='padding：2px;边框：1px dotted; position：absolute; left：112px; top：2px; width：100px;'> asdasd< / div> 
< div class ='elmnt elmnt3'id ='elmnt7'style ='padding：2px; border：1px dotted; position：absolute; left：218px; top：2px; width：100px;'> asdasd< / div> 
< div class ='elmnt elmnt4'id ='elmnt8'style ='padding：2px; border：1px dotted; position：absolute; left：324px; top：2px; width：100px;'> sadasd< / div> 
< / div> 
< div class ='tuple tuple3'style ='padding：2px; border：1px solid; position：absolute; min-width：3px; width：auto; min-height：3px; height：auto;'> 
< div class ='elmnt'id ='elmnt1'style ='padding：2px; border：1px dotted; position：absolute; left：6px; width：100px;'> adasd< / div> 
< div class ='elmnt elmnt2'id ='elmnt10'style ='padding：2px; border：1px dotted; position：absolute; left：112px; top：2px; width：100px;'> asdasd< / div> 
< div class ='elmnt elmnt3'id ='elmnt11'style ='padding：2px; border：1px dotted; position：absolute; left：218px; top：2px; width：100px;'> asdasd< / div> 
< div class ='elmnt elmnt4'id ='elmnt12'style ='padding：2px; border：1px dotted; position：absolute; left：324px; top：2px; width：100px;'> sadasd< / div> 
< / div> 
  

解决方案>

将最外面的父项设置为 position：relative ，然后将所有级别的内部div设置为 position：absolute;

您可以定位绝对父元素的绝对父元素，因此没有问题。

以下是一个示例： http://codepen.io/pageaffairs/pen/dzkAF

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
 
< style media =all> 
 
 .one {position：relative;背景：红色; width：200px; height：200px;} 
 
 .two {position：absolute;背景：蓝色; width：80px; height：80px; top：20px; left：30px;} 
 
 .three {position：absolute;背景：绿色; width：50px; height：50px; top：10px; left：50px;} 
 
< / style> 
 
< / head> 
< body> 
 
< div class =one> 
< div class =two> 
< div class =three> 
< / div> 
< / div> 
< / div> 
 
< / body> 
< / html> 
  

以下是没有设置高度但添加内容的示例：

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
 
< style media =all> 
 
 .one {position：relative;背景：红色; width：200px;} 
 
 .two {position：absolute;背景：蓝色; width：300px; top：20px; left：30px;} 
 
 .three {position：absolute;背景：绿色; width：400px; top：10px; left：50px;} 
 
< / style> 
 
< / head> 
< body> 
 
< div class =one> 
某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容
< div class =two> 
某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容一些内容某些内容
< div class =three> 
某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容某些内容一些内容某些内容
< / div> 
< / div> 
< / div> 
 
< / body> 
< / html> 
  

I have an outer div, divs inside the outer div and divs inside these divs too. I want to position the innermost div wrt to its parent, the middle level div wrt to its parent i.e. outermost div. For just divs inside a div we ca achieve this using relative positioning for the parent div and absolute positioning for child divs. But how do we achieve it when we have more levels of nested divs?

I want to have predefined width for the innermost level divs and the other higher level divs should have their width and height to just fit their child divs. I have the following code, but it does not seem to work. The code is shown below:

<div class='list' id='list1' style='padding: 1px; border : 5px groove; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
<div class='tuple tuple1' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div>
    <div class='elmnt elmnt2' id='elmnt2' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt3' id='elmnt3' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt4' id='elmnt4' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div>
</div>
<div class='tuple tuple2' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div>
            <div class='elmnt elmnt2' id='elmnt6' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt3' id='elmnt7' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt4' id='elmnt8' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div>
</div>
<div class='tuple tuple3' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div>
    <div class='elmnt elmnt2' id='elmnt10' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt3' id='elmnt11' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt4' id='elmnt12' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div>
</div>

解决方案

Set the outermost parent to position: relative, and then the inner divs of all levels to position: absolute;

You can position an absolute element in relation to an absolute parent, so no problem there.

Here's an example: http://codepen.io/pageaffairs/pen/dzkAF

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.one {position: relative; background: red; width: 200px; height: 200px;}

.two {position: absolute; background: blue; width: 80px; height: 80px; top: 20px; left: 30px;}

.three {position: absolute; background: green; width: 50px; height: 50px; top: 10px; left: 50px;}

</style>

</head>
<body>

<div class="one">
    <div class="two">
        <div class="three">
        </div>
    </div>
</div>

</body>
</html>

Here's an example with no heights set but with content added:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.one {position: relative; background: red; width: 200px;}

.two {position: absolute; background: blue; width: 300px; top: 20px; left: 30px;}

.three {position: absolute; background: green; width: 400px; top: 10px; left: 50px;}

</style>

</head>
<body>

<div class="one">
    Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
    <div class="two">
    Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
        <div class="three">
        Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
        </div>
    </div>
</div>

</body>
</html>

这篇关于相对于彼此定位多个嵌套的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！