2016.3.14CSS 定位第六天_html/css_WEB-ITnose
程序员文章站
2022-04-22 11:20:27
...
CSS定位 CSS 定位机制 static : 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分;行内元素则会创建一个或多个行框,置于其父元素中。 relative : 元素框偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍然保留。 absoulte : 元素框从文档流中完全删除,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就好像元素不存在一样。元素定位后生成一个块元素,而不论原来它在正常文档流中生成何种类型的框。 fixed : 元素框的表现类似将position设置为absoulte,不过其包含块是浏览器窗口。 position: relative;参考的是自己原来得位置。 第一行文字设置postion为relative,这并不会造成什么反应,但是我们还给p1设置了left: 30px;,这就会使元素距离左侧产生30px的间距。 同样,第二行文字设置right: 30px,会使元素距离右侧30px的间距,就产生了跑到屏幕外面的情况 第三方没有做任何处理,正常显示 注意,一定要设置好position: relative;,否则top、right、bottom、left是不起作用的。 postion: absolute;参考的是自身的包含块,也就是自己的父视图 当设置了position: absolute;属性之后,标签的位置就变得绝对了。这个时候我们设置top、right、bottom、left其中的任何一个属性,都可以设置标签的位置。 注意,一定要设置好position: absolute;,否则top、right、bottom、left是不起作用的。 position: fixed;参考系是浏览器的窗口 当给标签设置了position: fixed;属性之后,这些标签就只会相对于浏览器窗口进行位置的设定,忽略网页的滚动 同样,如果不设置postion: fixed;属性,而是直接设置top、right、bottom、left都不会起作用
CSS中一共有三种基本定位机制:普通流、浮动、绝对定位。
如果不进行专门指定,所有的标签都在普通流中定位。
块级元素从上到下一个接一个的排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。
position属性
通过position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
包括4个属性值:static、relative、absolute、fixed
代码展示
position: static;
static是position属性的默认值,无特殊定位。均为正常定位。
position: reletive;
HTML代码:
我是p1
我是p2
我是p3
CSS代码:
.p1 { position: relative; left: 30px;}.p2 { position: relative; right: 30px;}
效果图:
解释:
position: absoulte;
HTML代码:
啦啦啦啦啦我是h1大标题
CSS代码:
.h1 { position: absolute; top: 100px; left: 100px;}
没有设置CSS样式的样子:
设置了CSS样式后的样子:
解释:
position: fixed;
HTML代码:
我是p one
我是p two
CSS代码:
.one { position: fixed; top: 100px; left: 30px;}.two { position: fixed; top: 50px; right: 30px;}
效果展示:
解释:
参考文章:http://www.w3school.com.cn/css/css_positioning.asp
关于界面排布优先级的问题 z-index
Document 123
关于界面元素框偏移
偏移前:
偏移后:
Document
推荐阅读
-
CSS Position 定位_html/css_WEB-ITnose
-
绝对定位和浮动的问题,求大神帮忙解决_html/css_WEB-ITnose
-
css 中position定位_html/css_WEB-ITnose
-
div 绝对定位_html/css_WEB-ITnose
-
div1 div2 怎么把div2定位到div1的右下角_html/css_WEB-ITnose
-
购物车案例--麻雀虽小五脏俱全(小标签 浮动 定位……)_html/css_WEB-ITnose
-
CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位_html/css_WEB-ITnose
-
absolut绝对定位的非绝对定位用法_html/css_WEB-ITnose
-
css3动画怎么定位_html/css_WEB-ITnose
-
padding对于元素position定位的影响_html/css_WEB-ITnose