内容简介：世界杯是一个很神奇的运动，让我欲罢不能的想参与其中。于是我买德国赢--德国输了，巴西赢--巴西平了，哥伦比亚赢...。最近真的有点屋漏偏逢连夜雨不仅世界杯屡屡爆冷门，买的几只基金也像过山车一样，刹不住车 顺流而下。 好了，开始说一下我今天要写的定位属性--首先我们谈一谈①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素(负数向左)。 ②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素(负数向右)。 ③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素(负数向下
世界杯是一个很神奇的运动，让我欲罢不能的想参与其中。于是我买德国赢--德国输了，巴西赢--巴西平了，哥伦比亚赢...。最近真的有点屋漏偏逢连夜雨不仅世界杯屡屡爆冷门，买的几只基金也像过山车一样，刹不住车 顺流而下。 好了，开始说一下我今天要写的定位属性-- position 。其实我最近一直在想一个问题，如果用大家都能懂得思维解释一个问题，希望能给读者营造一个轻松的环境，又能让读者学到知识。
一、介绍定位这一家子
首先我们谈一谈 positon ，他是规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。而在position中生活着四个孩子：
- 相对定位（大娃）relative ：不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
- 绝对定位（二娃）absolute ：**脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
- 固定定位 （三娃）fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
- 默认定位 （四娃）static ：默认值；默认布局。 ##二、 技能介绍 上面大概也介绍了几口子的一些基本属性，但就算他脱离了基本的文档流，但是没有一个基本的技能还是无法来一场说走就走的旅游。于是我们在下面介绍一下他的几个技能。（
注意四娃比较懒惰，并没有学习这几项技能）
①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素(负数向左)。 ②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素(负数向右)。 ③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素(负数向下)。 ④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素(负数向上)。
##二、有底线的大娃--相对定位 首先 我们先结合一下代码看一下大娃的定义：
<!DOCTYPE html>
<html>
<head>
<title>position测试</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
background: red;
}
.dawa {
position: relative;
width: 100px;
height: 100px;
background: blue;
left:600px;
top: 200px;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
</div>
</body>
</html>
复制代码
效果如下：
某一天，大娃告诉未觉醒的二娃说，我想出去玩玩。然后二娃心想：大娃的房间比较舒服，于是就想着大娃出去之后，来一波鸠占鹊巢。但是却发现大娃虽然走了，但是大娃却把房间的门给锁上了。并且从上面的图示我们可以发现大娃是一个非常守规矩的小伙子，他只会相对于自己的位置进行移动。 ##三、守规矩的二娃--绝对定位 二娃觉得大娃这个人心机很深，为什么你都出们了还把房门关上。于是在悲愤之下，二娃觉醒了，想顺着大娃的轨迹去找大娃理论
<!DOCTYPE html>
<html>
<head>
<title>position测试</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
}
.dawa {
position: relative;
width: 100px;
height: 100px;
background: blue;
left:600px;
top: 50px;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
position: absolute;
left:600px;
top: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
</div>
</body>
</html>
复制代码
效果图如下：
这里可以发现 二娃（absolute）是根据浏览器来进行偏移的，所以和大娃（relative）相对于本身偏移的路径不同。
于是生气的大娃决定用自己的黑魔法将整个房间给圈起来。
<!DOCTYPE html>
<html>
<head>
<title>position测试</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
position: relative; // 黑魔法
overflow: scroll;
}
.dawa {
width:100px;
height: 100px;
background: blue;
position: absolute;
left:600px;
top: 50px;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
position: absolute;
left:600px;
top: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
</div>
</body>
</html>
复制代码
使用完黑魔法的大娃回到旅游的去处了，继续玩耍。在大娃的敦敦教导之后，二娃便重新开始释放技能。效果图如下：
z-index: 100;
，效果图如下：
##四、肆意妄为的三娃--固定定位 看到二娃和大娃在旅游那里玩的嗨的不行，三娃一想我也有技能于是便发功顺着大娃和二娃的足迹去追寻。
<!DOCTYPE html>
<html>
<head>
<title>position测试</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
position: relative; // 黑魔法
overflow: scroll;
}
.dawa {
width:100px;
height: 100px;
background: blue;
position: absolute;
left:600px;
top: 50px;
z-index: 100;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
position: absolute;
left:600px;
top: 50px;
}
.sanwa {
width:100px;
height: 100px;
background: black;
position: fixed;
left: 600px;
top: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
<div class="sanwa"></div>
</div>
</body>
</html>
复制代码
效果图：
但是当四娃的技能用完却发现自己和二娃一样也是迷路了，并且大娃的黑魔法也没有了什么作用。 ##五、总结 相信有前面的一些小例子，大家也差不多都明白了position的含义： 1、 relative定位会相对于自身进行偏移，并且并在文档流中留下空白区域。 2、 absolute定位如果在没加限制的情况下会以浏览器的四个角进行偏移。 3、 如果父容器的定位属性是relative，则absolute会以父容器的四周为起始点进行偏移。 4、 fixed定位不受到任何的拘束，始终会以浏览器四个角进行偏移
##说在最后 这篇是我想了很久才正式写下来的文章，我主要重新读了之前的文章发现以前写的文章比较的无趣，让人看了之后有种想睡觉的欲望，我可不想这样。 所谓之学习就应该是快乐的 ，我希望能用这种方式感染、帮忙到每一个人。好了，睡午觉去了...
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- CSS之定位和堆叠属性
- CSS进阶（11）—— overflow属性详解，利用CSS实现锚点定位
- 认识绝对定位，相对定位
- 移动端页面头部固定定位的绝对定位实现
- webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案——第五课
- IP 地址怎么定位？
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
