博客列表 >定位-绝对定位

定位-绝对定位

℃级的博客
℃级的博客原创
2019年01月18日 17:22:21746浏览

下面五个div,进行绝对定位(absolute)。



实例

.parent{

	width:500px;
	height:500px;
	border:1px solid #ccc;
	position:relative;
}
.box1{
	width:100px;
	height:100px;
	background-color:lightblue;
    position:absolute;
    left:200px;

	}
.box2{
	width:100px;
	height:100px;
	background-color:lightgreen;
	 position:absolute;
	 top:100px;
	 left:100px;
	}
.box3{
	width:100px;
	height:100px;
	background-color:lightcoral;
	position:absolute;
	top:100px;
     left:200px;
	}
.box4{
	width:100px;
	height:100px;
	background-color:lightblue;
    position:absolute;
    top:200px;
     left:200px;
	}
.box5{
	width:100px;
	height:100px;
	background-color:lightgray;
    position:absolute;
    top:100px;
      left:300px;
	}

运行实例 »

点击 "运行实例" 按钮查看在线实例

q3.bmp

体会:绝对定位是脱离文档流的一种定位方式,脱离的元素设定为绝对定位时,变为块级元素,重新排列,定位前,前一个元素必须设为有定位属性的元素,这样才能绝对定位

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议