码迷,mamicode.com
首页 > 其他好文 > 详细

定位(position)

时间:2016-10-21 02:01:34      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:定位(position)

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<!-- position: relative:相对定位(相对于自身位置) -->

<div style="width: 400px; height: 400px; background-color: #ff6699; position: relative;top: -50px; left: -50px;">

</div>


<!--position: absolute:绝对定位(相对于具有position属性父级元素移动,如果父级元素没有position属性就相对于body移动)  -->

<div style="width: 800px; height: 800px; background-color: #ff0000;position: absolute;">

<div style="width:500px;height: 500px;background-color: #00ff00; ">

<div style="width: 200px;height: 200px;background-color: #0000ff;position: absolute;top: 150px;left: 150px;">

</div>

</div>

</div>

</body>

</html>

技术分享


本文出自 “12145704” 博客,请务必保留此出处http://12155704.blog.51cto.com/12145704/1863872

定位(position)

标签:定位(position)

原文地址:http://12155704.blog.51cto.com/12145704/1863872

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!