html之relative,absolute和float理解

html-css016

html之relative,absolute和float理解,第1张

相对定位,在其默认显示的位置的基础上,通过上下左右四个参数设置偏移一定的距离,但是仅仅是显示出来的效果偏移了,但它实际还占用着原来的位置

如果div的position设置了relative属性,但是没有指定偏移量,则默认为position:static。

绝对定位, 浮动元素脱离文档流,偏移后元素不再占用了原来的位置,原位置将由后面的元素取代,默认以除static(一般元素默认的定位都是static)定位的第一个元素为参考进行定位 ,元素的位置通过top,right,bottom,left属性进行规定,若外部没有其他定位元素,则以浏览器左上角为参考原点。

例如:如果想指定元素div1作为参考原点,则div1应该加上position:relative(所以absolute常搭配relative使用)

浮动元素脱离文档流 ,元素水平方向浮动起来,只能向左或向右移动,通过float:left(right)设置左右浮动

设置浮动后出现两个问题:

1、设置浮动后周围元素会重新排列

2、怎么实现垂直排列

解决上面的问题需要用到清理浮动,关键字clear

清除浮动的关键字是clear,官方定义如下:

用法

clear : none | left | right | both

含义:

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

注意 :clear属性只能影响元素本身,不能影响其他元素

假如div1和div2均设置了向左浮动,则两个元素水平并列向左排列分别为div1,div2,如果想div2独占一行,则需要给div2设置clear:left,表示清理div2左侧浮动(实际div1浮动并未清理),div2下移一行。

在一般的前端开发中比较常用的定位有三种:相对定位,绝对定位,固定定位。下面简要的说明一下他们的使用特点:相对定位position:relative1.它可以在四个方向分别或者同时进行偏移 2.定义时它的参照物是父元素(没有时为浏览器本身) 3.偏移后元素的原来位置还是被占着,并没有空出来 4.当父元素和子元素同时定义时,他们的参照物是父元素,且占据原来的位置 绝对定位position:absolute1. 它可以在四个方向分别或者同时进行偏移 2.单独定义时它的参照物是浏览器本身,且不占据原来的位置 3.当父元素和子元素同时定义时,他们的参照物是父元素,且不占据原来的位置 4.当子元素绝对定位,父元素相对定位时,他们的参照物是父元素,且还占据原来的位置 5.当子元素相对定位,父元素绝对定位时,他们的参照物是父元素,且不占据原来的位置 固定定位position:fixed 1.它可以在四个方向分别或者同时进行偏移 2.定义时它总是以浏览器为参照物,且不占据原来的位置 3.它不会随着浏览器的滚动而移动,即会固定在所能到观察浏览器界面的固定地方 注:普遍使用方式为子绝父相,即子元素绝对定位,父元素相对定位 可以使用z-index: 来进行优先级显示