CSS定位之position详解_html/css_WEB-ITnose
程序员文章站
2022-05-18 09:54:09
...
position属性
在前端中,position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。
它有几个常用的属性:
其中relative、position、fixed比较难于理解,下面就介绍下这三个:
relative
看意思是相对定位,那么是相对什么进行定位呢?其实是相对它原本的位置。比如学生站队,教练喊小明。小明出队,向前走了一步。
这就相当于:
小明{ position:relative; 向前一步!}
看图也容易理解,原本三个span的位置为:
123
当我们对第2个span添加相对定位后,它先对于原始的位置偏移。
123
absolute
这个属性比较复杂,看属性的名字是绝对定位,其实不然。
它也是一种相对定位,不过相对的不再是自己,而是父元素。具体是哪个父元素,就要看父元素是否应用了position属性。
举个例子,最开始我们有3个嵌套的div
123
如果对第3个div应用absolute定位,那么会出现下面的效果:
123
如果对div-1应用position为relative或者absolute,则div-3就会相对div-1进行定位。
123
由此可以看出,如果父元素没有应用position样式,那么就会继续向上查找,直到html元素。如果都没有找到,absolute就会根据html进行定位;相反,如果找到某个父元素有absolute或者relative或者fixed,则会先对这个元素进行定位。
fixed
这个就比较容易理解了,它是相对浏览器的窗口进行定位。
比如博客园的推荐按钮,或者导航,都可以应用这个position样式。
上一篇: Dreamweaver中css选择器中的类使用方法
下一篇: php字符编码问题详解
推荐阅读
-
CSS3之圆角_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
CSS Position学习_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
html之div始终停留在屏幕中间部分_html/css_WEB-ITnose
-
CSS 之 核心篇_html/css_WEB-ITnose
-
CSS中的盒子模型详解_html/css_WEB-ITnose
-
css学习笔记二之inline-block_html/css_WEB-ITnose
-
页面制作之开发调试工具(1)_html/css_WEB-ITnose
-
meta之renderer_html/css_WEB-ITnose