css中的定位方式有哪些

这篇文章给大家分享的是有关css中的定位方式有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

css有4种定位方式,分别为静态定位(静态),相对定位(相对),绝对定位(绝对)和固定定位(固定);定位有不同的参数,例如左,右,上,下,z - index等。

css中的定位使用来布局的熟练应用对页面美化有很好的帮助,css有4种定位方式,分别为:静态定位,相对定位,绝对定位,固定定位,定位有不同的参数,例如:左,右,上,下,z - index等。

1,静态定位(静态)

一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。

2,绝对定位(绝对)

绝对定位的元素从文档流中拖出,使用左,右,顶部,底部等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有设置定位属性,则依据体元素左上角作为参考进行定位。绝对定位元素可层叠,层叠顺序可通过z - index属性控制,z - index值为无单位的整数,大的在上面,可以有负值。

绝对定位的定位方法:如果它的父元素设置了除静态之外的定位,比如位置:相对或位置:绝对及位置:固定的,那么它就会相对于它的父元素来定位,位置通过左,上,右,下属性来规定,如果它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位,如果还是没有就继续向更高层的祖先元素类推,总之它的定位就是相对于设置了除静定位之外的定位的第一个祖先元素,如果所有的祖先元素都没有以上三种定位中的其中一种定位,那么它就会相对于文档身体来定位(并非相对于浏览器窗口,相对于窗口定位的是固定的)。

& lt; head> 　　& lt; style 类型=拔谋?css"比; 　　.box  { 　　背景:,红色; 　　宽度:100 px; 　　身高:100 px; 　　浮:左; 　　保证金:5 px; 　　} 　　.two  { 　　位置:绝对的; 　　上图:,50 px; 　　左:,50 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div 类=癰ox",祝辞One