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

时间：2015-10-11 06:59:43

标签： html position absolute

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
    <title>Charts</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
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; 
}

</style>
</head>
<body>
    <label id="spn" style="display:none"></label>
	<label id="spnstring" style="display:none"></label>
    <div class="container">
		<div class="containerTop">
			<div class="contentheaderleft">
					<h3 align="center">Widget</h3>
			</div>
			<div class="contentheaderright">
				<h3 align="center">Drop Your Widget Here</h3>
			</div>
		</div>
		<div class="containerBottom">
			<div id="leftdiv" class="contentdetailleft">
			</div>
			<div class="contentdetailright" id="rightsec">
			</div>
        </div>
    </div>
</body>
</html>

现在删除左边：0px和top：0px on contentdetailleft样式（请参阅下面的HTML）。现在带有样式contentdetailleft的div位于带有样式contentBottom的div中。怎么会这样？

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
    <title>Charts</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
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;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; 
}

</style>
</head>
<body>
    <label id="spn" style="display:none"></label>
	<label id="spnstring" style="display:none"></label>
    <div class="container">
		<div class="containerTop">
			<div class="contentheaderleft">
					<h3 align="center">Widget</h3>
			</div>
			<div class="contentheaderright">
				<h3 align="center">Drop Your Widget Here</h3>
			</div>
		</div>
		<div class="containerBottom">
			<div id="leftdiv" class="contentdetailleft">
			</div>
			<div class="contentdetailright" id="rightsec">
			</div>
        </div>
    </div>
</body>
</html>

由于 伊恩

1 个答案:

答案 0 :(得分：0)

您看到此行为更改的原因是因为使用“position：absolute;”时发生的默认定位是“left：0;”。但是，“top：0;”不是默认行为，所以当你添加它时（正如你所说），“。contentdetailleft”定位于“.container”元素。

因为“.contentdetailleft”位于DOM中的“.contentheaderleft”之后（*更重要的是，因为“.containerBottom”和“.containerTop”仍然是默认位置 - 静态），一旦“.containerdetailleft”绝对定位它被拉出DOM的正常流程并根据它的相对/绝对父级（“.container”）定位。此时它位于容器的左上角，位于“.containerTop”的顶部，因此位于“.contentheaderleft”的顶部。

你不需要风格“left：0;” “.contentdetailleft”一旦被绝对定位。如果你想保持它绝对并具有“顶部”样式，但没有重叠/覆盖“.contentheaderleft”，只需将它从顶部准确的高度定位。“contentheaderleft”（42px），即“top” ：42px;“。

*见下文，我更新的所有内容都是“.contentdetailleft”

的最高位置 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
    <title>Charts</title>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
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:42px;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; 
}

</style>
</head>
<body>
    <label id="spn" style="display:none"></label>
	<label id="spnstring" style="display:none"></label>
    <div class="container">
		<div class="containerTop">
			<div class="contentheaderleft">
					<h3 align="center">Widget</h3>
			</div>
			<div class="contentheaderright">
				<h3 align="center">Drop Your Widget Here</h3>
			</div>
		</div>
		<div class="containerBottom">
			<div id="leftdiv" class="contentdetailleft">
			</div>
			<div class="contentdetailright" id="rightsec">
			</div>
        </div>
    </div>
</body>
</html>

相关问题
最新问题