css下position属性详解_html/css_WEB-ITnose
在html中有块元素和行元素之分。块元素诸如div、p等,其中的子元素会按垂直方向排列,这些元素显示为一块内容;与之相反,span、strong等等元素被称为行内元素,他们的内容显示在行中,即横向扩展。
凡是写在HTML中的元素都会被加载到文档流中,简单的说文档流就相当于一个容器,HTML中的所有元素都是按照从上到下,从左到右的顺序被加载到文档流中,然后在渲染网页的时候,再根据文档流中的顺序将元素一个一个显示在网页中。所以在文档流中的元素都是根据相对位置来进行绘制的。不过并不是所有的元素都会被放入到文档流中,比如position为absolute、fixed等等情况时。
那么现在就正式来讲position属性。position属性共有4个值,分别是relative、absolute、fixed和static:
static:这是position的默认值,static元素会出现在正常的文档流中,并且按照磨人的规则绘制;
relative:position为relative的元素依然会出现在文档流中,设置为relative的元素同时是希望在正常的显示位置的基础上进行一些微 调。例如“left:20px”的意思就是在正常显示位置的基础上左边缩进20像素;
absolute:position为absolute的元素会从文档流中删除,absolute元素的绘制不再以正常位置进行显示,而是以其第一个position不为static的父元素为定位范围,再根据left、right等等属性进行定位。
fixed:position为fixed的元素的定位规则更absolute类似,只是fixed元素的定位范围不再是父元素而是整个窗口。所以设置为fixed的元素在用户滚动浏览网页时,其相对于浏览器窗口的位置也不会改变。
好了,基本的定义解释清楚了,现在就结合博主自己的实践来谈谈具体的使用,博主想要实现的效果如下:
即一张图片的右下角有一个按钮。根据上文讲解到的知识,这里应该有两个div元素,其中一个为另一个的父元素:
既然class为btn的
div.btn{position:absolute;right:10px;bottom:10px;}而对于class为background_img的
div.background_img{position:relative;}就这么几行,这个效果就实现了,各位读者可以自己试一下。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
推荐阅读
-
IE8下jQuery改变png图片透明度时出现的黑边问题_html/css_WEB-ITnose
-
Markdown+Bootstrap图片自适应属性_html/css_WEB-ITnose
-
css所有选择器的详解_html/css_WEB-ITnose
-
为什么设置的margin-top属性不管用_html/css_WEB-ITnose
-
使用box-shadow属性实现圆角效果代码实例_html/css_WEB-ITnose
-
position:fixed定位时 “高度坍塌” 问题的解决_html/css_WEB-ITnose
-
CSS的Display属性可能的值_html/css_WEB-ITnose
-
ie下加载不到css的一种原因_html/css_WEB-ITnose
-
HTML data属性_html/css_WEB-ITnose
-
CSS vertical-align属性的用法_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论