CSS定位之position详解

position属性

在前端中,position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。

它有几个常用的属性:

  • static 默认值。通常是在覆盖absolute或者relative样式时使用。
  • relative 相对定位。相对于原本自己的位置,其他的元素样式不会发生改变。
  • position 绝对定位。相对于最近的一个应用absolute或者relative的父元素,然后相对这个元素进行定位。
  • fixed 相对浏览器定位。
  • inherit 继承父样式。

其中relative、position、fixed比较难于理解,下面就介绍下这三个:

relative

看意思是相对定位,那么是相对什么进行定位呢?其实是相对它原本的位置。比如学生站队,教练喊小明。小明出队,向前走了一步。 这就相当于:

小明{
 position:relative;
 向前一步!
}

看图也容易理解,原本三个span的位置为:

<html>
<body>
<span class="span-1" style="background-color:red;padding:10px;">1</span>
<span class="span-2" style="background-color:blue;padding:10px;">2</span>
<span class="span-3" style="background-color:green;padding:10px;">3</span>
</body>
</html>

当我们对第2个span添加相对定位后,它先对于原始的位置偏移。

<html>
<head>
<style type="text/css">
.span-2 {
position:relative;
top:10px;
left:10px;
}
</style>
</head>

<body>
<span class="span-1" style="background-color:red;padding:10px;">1</span>
<span class="span-2" style="background-color:blue;padding:10px;">2</span>
<span class="span-3" style="background-color:green;padding:10px;">3</span>
</body>

</html>

absolute

这个属性比较复杂,看属性的名字是绝对定位,其实不然。 它也是一种相对定位,不过相对的不再是自己,而是父元素。具体是哪个父元素,就要看父元素是否应用了position属性。

举个例子,最开始我们有3个嵌套的div

<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>

</html>

如果对第3个div应用absolute定位,那么会出现下面的效果:

<html>
<head>
<style type="text/css">

.div-3 {
position:absolute;
right:0;
top:0;
}
</style>
</head>

<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>

</html>

如果对div-1应用position为relative或者absolute,则div-3就会相对div-1进行定位。

<html>
<head>
<style type="text/css">
.div-1{position:relative;}
.div-3 {
position:absolute;
right:0;
top:0;
}
</style>
</head>

<body>
<div class="div-1" style="background-color:red;padding:10px;">1
<div class="div-2" style="background-color:blue;padding:10px;">2
<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3
</div>
</div>
</div>
</body>

</html>

由此可以看出,如果父元素没有应用position样式,那么就会继续向上查找,直到html元素。如果都没有找到,absolute就会根据html进行定位;相反,如果找到某个父元素有absolute或者relative或者fixed,则会先对这个元素进行定位。

fixed

这个就比较容易理解了,它是相对浏览器的窗口进行定位。

比如博客园的推荐按钮,或者导航,都可以应用这个position样式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

安卓开发小效果--走马灯

282120
来自专栏闻道于事

JavaScript事件与例子

事件,就是预先设置好的一段代码,等到用户触发的时候执行。 一:常见的事件: 1.关于鼠标的事件   onclick 鼠标单击触发   ondblclick 鼠标...

28170
来自专栏杨龙飞前端

css常用居中

32060
来自专栏转载gongluck的CSDN博客

vc中实现控件的隐藏与显示

一、隐藏控件             CWnd *pWnd;         pWnd = GetDlgItem(IDC_EDIT1);        //获...

36450
来自专栏前端小叙

Vue slot简单理解

情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child'...

47460
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。   也可以通过变量来实现自定义的标题 1     h1:before{...

22850
来自专栏python3

tkinter -- button2

StringVar是Tk库内部定义的字符串变量类型,在这里用于管理部件上面的字符;不过一般用在按钮button上

10320
来自专栏angularejs学习篇

marquee 标签的使用详情

65130
来自专栏Android开发与分享

【React Native】react-native-scrollable-tab-view

586120
来自专栏十月梦想

css选择器

            选择器{... !important} 则该选择器的优先级最高

8750

扫码关注云+社区

领取腾讯云代金券