首页 >web前端 >html教程 >position中的困惑,帮忙解决一下_html/css_WEB-ITnose

position中的困惑,帮忙解决一下_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-21 08:49:001070浏览

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>	*{		margin:0;		padding:0;	}	.parent{		background: red;		position: absolute;		left:60px;		width: 300px;		height: 300px;	}	.childRight{		background: blue;		width: 240px;		position: relative;		right:60px;	}	.child-Right{		background: yellow;		width: 240px;		position: relative;		right:-60px;	}	.childLeft{		background: blue;		width: 240px;		position: relative;		left:60px;	}	.child-Left{		background: yellow;		width: 240px;		position: relative;		left:-60px;	}	</style></head><body>	<div class="parent">parent		<div class="childRight">childRight</div>		<div class="child-Right">child-Right</div>		<div class-"childLeft">childLeft</div>		<div class="child-Left">child-Left</div>	</div>	<div style="width:300px;height:300px;border:1px solid #000">hello</div></body></html>

大家帮忙看一下,父标签设置绝对定位,子标签都设置了相对定位,两个问题:1.为什么right:60px和left:-60px相同,第三个子标签(.childLeft)为什么不显示颜色了?


回复讨论(解决方案)

对,
相对定位情况下,是以元素自身原本的位置进行偏移,右边偏移正60px就等于左边偏移负60px。


为什么不显示颜色
 

childLeft
 

这么明显,等于号你打成减号了

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn