css中定位問題：絕對定位、相對定位、fixed和static

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 18:47:41

css中定位問題：絕對定位、相對定位、fixed和static

css中定位問題：絕對定位、相對定位、fixed和static:本篇文章給大家?guī)淼膬?nèi)容是關于css中定位問題：絕對定位、相對定位、fixed和static，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。1.絕對定位（absolute）：脫離原來位置進行定位，可以使用left right top bottom進行定位ht

推薦度：

點擊下載本文 文檔為doc格式

導讀css中定位問題：絕對定位、相對定位、fixed和static:本篇文章給大家?guī)淼膬?nèi)容是關于css中定位問題：絕對定位、相對定位、fixed和static，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。1.絕對定位（absolute）：脫離原來位置進行定位，可以使用left right top bottom進行定位ht

本篇文章給大家?guī)淼膬?nèi)容是關于css中定位問題：絕對定位、相對定位、fixed和static，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1.絕對定位（absolute）：脫離原來位置進行定位，可以使用left right top bottom進行定位

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

css代碼：

*{
	margin:0;
	padding:0;
}
.demo{
	position:absolute; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5; /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

沒有使用opsition定位時效果（p元素是塊級元素，獨占一行）

加上定位，沒有設置top left 時效果（此時demo和box不在同一層面）

加上top left效果

2.相對定位（relative）：保留原來位置進行定位，可以使用left right top bottom進行定位

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>hhhh</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<p class="demo"></p>
	<p class="box"></p>
</body>
</html>

css代碼

*{
	margin:0;
	padding:0;
}
.demo{
	position:relative; 
	/*top:100px;
	left:100px;*/
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5; /*透明度*/
}
.box{
	width:150px;
	height:150px;
	background-color: green;
}

沒有使用opsition定位時

使用opsition定位不加top left 時

使用opsition定位加上top left 時（保留紅色原來的位置進行定位，上方有空出原來紅色的部分）

3.fixed：相對于瀏覽器的窗口對元素進行定位，可以使用left right top bottom進行定位

4.static：默認值，沒有定位，top left 等不起作用

注意：存在父子元素使用定位時

absolute：相對于最近的有定位的父級進行定位，要是沒有最就相對文檔進行定位
relative：相對于自己原來的位置進行定位

通常情況下，我們使用relative作為參照物，使用absolute進行定位

例如：

<div class="wrapper">
 <div class="demo"> 
 <div class="box"></div>
 </div>
</div>

若使box參照demo進行定位則

*{
	margin:0;
	padding:0;
}

.wrapper{
	margin-left: 100px;
	width: 200px;
	height: 200px;
	background-color: orange;
}
.demo{
	position:relative; 
	margin-left: 100px;
	width: 100px;
	height: 100px;
	background-color: red;
	
}
.box{
	position:absolute;
	left: 50px;
	width:50px;
	height:50px;
	background-color: green;
}