Rumah > Artikel > hujung hadapan web > css绝对定位
css绝对定位
- 无忌哥哥asal
- 2018-06-28 17:56:521895semak imbas
定位的四种模式:static,relative,absolute,fixed
定位的四个位置:left,right,top,bottom
定位属性:position,有四种状态值
1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效
2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效
3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效
4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.绝对定位</title>
<style>
/*body {*/
/*border: 1px solid red;*/
/*}*/
.box {
width: 600px;
height: 600px;
background-color: yellow;
}
.box1 {
width:200px;
height: 200px;
background-color: lightskyblue;
position: absolute;
top:0;
right:0;
}
.box2 {
width:200px;
/*width:250px;*/
height: 200px;
/*height: 250px;*/
background-color: lightgreen;
}
.box3 {
width:200px;
height: 200px;
background-color: lightcoral; /*珊瑚色*/
}
.box4 {
width:200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>Atas ialah kandungan terperinci css绝对定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn