CSS - 定位器

使用說明

  • static 靜態

  • relative 相對

  • absolute絕對-對DOM的上層為基準。若沒有以下設定會以頁面為基準

    • relative

    • absolute

    • fixed

  • fixed固定

定位與深度

@charset "utf-8";

.box-out,
.box-in {
	padding: 10px;
}

.box-out{
	margin: 20px auto;
	width: 800px;
	height: 500px;
	background-color: pink;
	
	position: relative;

}

.box-in-1 {
	/* 我是子層的哥哥 */
	/* 若box-out不加relative 則 absolute + top + left 為網頁為基準 */
	top: 0;
	left: 100px;
	width: 200px;
	height: 300px;
	background-color: yellowgreen;
	z-index: 2;
}

.box-in-2 {
	/* 我是子層的弟弟 */
	z-index: 1;
	top:250px;
	left: 200px;
	width: 300px;
	height: 100px;
	background-color: brown;
}

.box-in{
	position: absolute;
}

固定廣告

Dropdown

PreviousCSS - 排版Next導覽列篇

Last updated

Was this helpful?