css中的定位涉及到的属性:
position
display
float
top、right、bottom、left
具体说明:
1、position:relative
相对布局:是相对于自己偏移前的元素进行的相对布局;使用top、left来设置偏移量;虽然偏移了,但是会保留自己未偏移时的空间,其他元素不能占用它。
图中可以看到“相对布局2”的位置偏移了,但是“相对布局3”的并没有紧紧贴着“相对布局1”之后进行放置;
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
border-width: 0px;
}
.area1{
position: static;
background-color: red;
}
.area2{
position: relative;
background-color: red;
left: 20px;
top: 60px;
}
</style>
</head>
<body>
<h4>position: relative;</h4>
<div>
<p>相对布局1 </p>
<p class="area2">相对布局2 </p>
<p>相对布局3 </p>
</div>
</body>
</html>
2、position: absolute;
绝对布局:是基于设置了position为relative、absolute、fixed的父节点进行的绝对布局,使用top、left进行偏移;
偏移的元素不会保留未偏移时的空间大小,其他元素会占用该空间;
图中“绝对布局b”因为没有合乎规则的父节点,所以最终是以body为父节点来进行的绝对定位;
“绝对布局d”有合乎规则的父节点(设置了position: relative;),所以就以该父节点来进行绝对定位;
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
border-width: 0px;
}
.area1{
position: static;
background-color: red;
}
.area2{
position: relative;
background-color: red;
left: 20px;
top: 60px;
}
.area3{
position: absolute;
background-color: red;
left: 20px;
top: 60px;
}
</style>
</head>
<body>
<div>
<p>相对布局1 </p>
<p class="area2">相对布局2 </p>
<p>相对布局3 </p>
</div>
<div>--------------------------------------------------------------</div>
<div>
<p>绝对布局a </p>
<p class="area3">绝对布局b </p>
<p>绝对布局c </p>
<div style="position: relative;background-color: yellow;">
ddddddd
<p class="area3">绝对布局d</p>
</div>
</div>
</body>
</html>
3、position: fixed;
固定布局:元素是相对于浏览器窗口进行的固定布局,设置了偏移量top、left之后,元素的位置不会随着滚动条的滚动而移动;而且元素不会保留未偏移时的空间大小,其他元素可以占用该空间;
图中可以看到“固定布局II”,是直接基于浏览器的窗口进行的固定布局,而且“固定布局III”占用了“固定布局II”未偏移时的空间;
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
border-width: 0px;
}
.area1{
position: static;
background-color: red;
}
.area2{
position: relative;
background-color: red;
left: 20px;
top: 60px;
}
.area3{
position: absolute;
background-color: red;
left: 20px;
top: 60px;
}
.area4{
position: fixed;
background-color: red;
left: 50%;
top: 10px;
}
</style>
</head>
<body>
<div>
<p>相对布局1 </p>
<p class="area2">相对布局2 </p>
<p>相对布局3 </p>
</div>
<div>--------------------------------------------------------------</div>
<div>
<p>绝对布局a </p>
<p class="area3">绝对布局b </p>
<p>绝对布局c </p>
<div style="position: relative;background-color: yellow;">
ddddddd
<p class="area3">绝对布局d</p>
</div>
</div>
<div>--------------------------------------------------------------</div>
<div style="margin-top: 80px;">
<p>固定布局I </p>
<p class="area4">固定布局II </p>
<p>固定布局III</p>
<div style="position: relative;background-color: yellow;">
IVIVIVIVIVIV
</div>
</div>
</body>
</html>
4、display可取值:
display: none;设置元素不可见,不占用空间位置;
display: inline;将一个元素设置为行内元素,行内元素设置width和height是无效的;大小是包裹内容
display: block;将一个元素设置为块级元素,块级元素可以设置width和height;如果不设置宽,默认是与父元素宽度一样,如果不设置高度,默认是包裹高度;
display:inline-block;将一个元素设置为行块元素,具有行内元素的特性,同时可以设置宽高;
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
border-width: 0px;
}
.area1 {
position: static;
background-color: red;
}
.area2 {
position: relative;
background-color: red;
left: 20px;
top: 60px;
}
.area3 {
position: absolute;
background-color: red;
left: 20px;
top: 60px;
}
.area4 {
position: fixed;
background-color: red;
left: 50%;
top: 10px;
}
</style>
</head>
<body>
<div>-------------------------相对布局-------------------------------------</div>
<div>
<p>相对布局1</p>
<p class="area2">相对布局2</p>
<p>相对布局3</p>
</div>
<div>-------------------------绝对布局-------------------------------------</div>
<div>
<p>绝对布局a</p>
<p class="area3">绝对布局b</p>
<p>绝对布局c</p>
<div style="position: relative; background-color: yellow;">
ddddddd
<p class="area3">绝对布局d</p>
</div>
</div>
<div>--------------------固定布局------------------------------------------</div>
<div style="margin-top: 80px;">
<p>固定布局I</p>
<p class="area4">固定布局II</p>
<p>固定布局III</p>
<div style="position: relative; background-color: yellow;">
IVIVIVIVIVIV</div>
</div>
<div>---------------------display-----------------------------------------</div>
<div style="margin-top: 10px;">
<p style="display: inline; height: 60px; background-color: red">pA</p>
<p style="display: inline; height: 60px; background-color: red">pB</p>
<p style="display: none; height: 60px; background-color: red">pC</p>
<div style="width: 80px;height: 80px;background-color: yellow;">
<p style="background-color: red">pD</p>
<p style="background-color: red;width: 40px;">pD2</p>
</div>
<a style="display: block; height: 60px; width: 60px; background-color: red">aE</a>
<a style="display: inline-block; height: 60px;width:80px;background-color: red">aF</a>
</div>
</body>
</html>
5、float可取值left,right
一般用于水平菜单