                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /網(wǎng)頁(yè)布局基礎(chǔ)

絕對(duì)定位影響問(wèn)題

*{

margin: 0px;padding:0px;

}

.wrap{

background:#ccc;height:160px;

}

.box1{

background:red;height:60px;

.box2{

background:blue;height:50px;

}

.box3{

background:green;height:40px;position: absolute;top:40px;left: 50px;

}

</style>

</head>

<body>

</div>

</body>

</html>

請(qǐng)問(wèn)這個(gè)代碼為什么box2 和box1 css樣式都顯示不出來(lái)，我把box2 和box1 都設(shè)置成相對(duì)定位，又可以，請(qǐng)問(wèn)這是為什么？，因?yàn)榻^對(duì)定位對(duì)兄弟元素也有影響嗎？

短發(fā)是小丸子

2017-05-26

源自：網(wǎng)頁(yè)布局基礎(chǔ) 4-4

關(guān)注問(wèn)題我要回答

912

操作

收起

1 回答

小白鼠丨回答被采納 +3 積分
2017-05-26

.box1少了一個(gè)括號(hào)，還有注意代碼書寫格式，CSS樣式不要寫在一行，不利于排查BUG，也不利于別人理解你的代碼

*{
	margin:0px;
	padding:0px;
}
.wrap{
	background:#ccc;
	height:160px;
}
.box1{
	background:red;
	height:60px;
}
.box2{
	background:blue;
	height:50px;
}
.box3{
	background:green;
	height:40px;
	position:absolute;
	top:40px;
	left:50px;
}
</style>
</head>
<body>
<div?class="wrap">
	<div?class="box1">box1</div>
	<div?class="box2">box2</div>
	<div?class="box3">box3box3box3</div>
</div>
</body>