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

WBOY
Release: 2016-06-21 08:49:00
Original
1043 people have browsed it

<!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>
Copy after login

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


回复讨论(解决方案)

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


为什么不显示颜色
 

childLeft
 

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template