css定位

最新推荐文章于 2024-05-17 21:20:19 发布

kiven.evn

最新推荐文章于 2024-05-17 21:20:19 发布

阅读量1.6k

点赞数 2

分类专栏：【Css+div】文章标签： CSS

本文链接：https://blog.csdn.net/han_yankun2009/article/details/9672441

版权

【Css+div】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

定位的原理很简单，利用定位，可以准确的定义元素框对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

作为提纲，先来看看postion都有哪些定位吧

使用position属性对元素进行定位： position属性

值：static |absolute | fixed | relative

初始值：static

运用范围：所有元素

继承值：无

计算值：根据指定确定

static：

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：

元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而无论原来它在正常流中生成何种类型的框。

fixed：元素框表现类似于absolute，只是以浏览器窗体为基准，进行定位

绝对定位：

是以最近的父类为基准，并且已经从标准流中脱离了。意味着他们对其后的兄弟盒子的定位没有影响，其他盒子就像不存在一样。并且其后的元素会占据它原来的位置。

咱们先来看一个基本的没有默认的static定位

实例代码
<html>
<head>
<title>position属性</title>
<styletype="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1pxdashed #000000;
width:100%;height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1pxdashed #000000;
padding:10px;
//position:absolute;                /*relative相对定位 */
//left:15px;                                /*子块的左边框距离它原来的位置15px */
//top:10%;
}
#block2{
background-color:#ffc24c;
border:1pxdashed #000000;
padding:10px;
}
-->
</style>
   </head>
<body>
<divid="father">
<divid="block1">absolute</div>
<divid="block2">block2</div>
</div>
</body>
</html>

效果图，如下图

首先是一个大的div，而后是两个小的div，都是块级元素。

css样式代码

然后我们对第一个absoult进行一个绝对的定位。我们可以看到效果图，block1已经覆盖了block2，而block2现在的位置是原来block1的位置。

那么block1又是相对谁定位的呢。我们先来修改css的代码

再来看效果图，

可发看出这里的基准是以浏览器窗体为基准的。

下面我们在修改father的位置，进行查看

#father{
background-color:#a0c8ff;
border:1pxdashed #000000;
width:100%;height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1pxdashed #000000;
padding:10px;
position:absolute;                /*relative相对定位 */
left:0;                                /*子块的左边框距离它原来的位置15px */
top:0;
}

我们将father也进行绝对定位，再将block1进行归零的定位，看看这次的基准是谁。

我们发现这次的基准是father。

所以通过对比我们验证了刚才的

绝对定位中：哪个父类设置了定位（是最近的父类为基准），那么就以它为基准，

没有设定是以body为基准

相对定位：

元素仍保持其未定位前的形状，它原本所占的空间仍保留，然后相对于原来的位置进行移动。

注意这里的，原本的位置仍保留。

还以上面的例子为准

之后进行relative定位，进行移动

#block1{
background-color:#fff0ac;
border:1pxdashed #000000;
padding:10px;
position:relative;                /*relative相对定位 */
left:15px;                                /*子块的左边框距离它原来的位置15px */
top:10%;
}