Rumah  >  Artikel  >  hujung hadapan web  >  position中的困惑,帮忙解决一下_html/css_WEB-ITnose

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

WBOY
WBOYasal
2016-06-21 08:49:001035semak imbas

<!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
 

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn