html定位的几种方式

html定位的几种方式,第1张

① CSS有三种定位方式:相对定位,绝对定位,固定定位;

② 相对定位->position:relative;

③ 绝对定位->position:absolute;

④ 固定定位->position:fixed;

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

1,static(默认)

2,relative(相对定位)

3,absolute(绝对定位)

4,mix relative and absolute(混合相对定位和绝对定位)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7331513.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存