首页 文章

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

提问于
浏览 次
0

具有样式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>

现在删除contentdetailleft样式的左边：0px和顶部：0px（请参阅下面的HTML） . 现在，具有样式contentdetailleft的div位于具有样式内容底部的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>

谢谢伊恩

html position absolute

1 回答

  • 0

    您看到此行为更改的原因是因为使用“position：absolute;”时发生的默认定位是“左：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>
    回复于

相关问题