在HTML中,三种定位的区别和含义分别是什么?

在HTML中,三种定位的区别和含义分别是什么?,第1张

一、相对定位 relative

1.参照物为自身;

2.相对定位只改变显示的位置,而不会改变占用的空间位置;

3.关于距离的正负值

二、绝对定位 absolute

1.参照物为具有定位属性的父元素

PS:如果距离当前最近的父元素不具有定位属性,则会一层一层向外找,直到找到具有定位属性(这里仅要求三种定位属性任一都可)的父元素而进行定位,如果找到最后未能找到具有定位属性的父元素,de则最终会依照body进行定位。

2.绝对定位不仅会改变显示的位置,而且会改变占用的空间位置。就好比是元素处于一种悬空漂浮的状态,没有“肉体”!

3.关于距离的正负值,和上面的相对定位的性质一样。

三、固定定位 fixed

固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化;   

固定定位的位置是  相对当前浏览器窗口  的;

在一般的前端开发中比较常用的定位有三种:相对定位,绝对定位,固定定位。

下面简要的说明一下他们的使用特点:

相对定位position:relative1.它可以在四个方向分别或者同时进行偏移

2.定义时它的参照物是父元素(没有时为浏览器本身)

3.偏移后元素的原来位置还是被占着,并没有空出来

4.当父元素和子元素同时定义时,他们的参照物是父元素,且占据原来的位置

绝对定位position:absolute1. 它可以在四个方向分别或者同时进行偏移

2.单独定义时它的参照物是浏览器本身,且不占据原来的位置

3.当父元素和子元素同时定义时,他们的参照物是父元素,且不占据原来的位置

4.当子元素绝对定位,父元素相对定位时,他们的参照物是父元素,且还占据原来的位置

5.当子元素相对定位,父元素绝对定位时,他们的参照物是父元素,且不占据原来的位置

固定定位position:fixed 1.它可以在四个方向分别或者同时进行偏移

2.定义时它总是以浏览器为参照物,且不占据原来的位置

3.它不会随着浏览器的滚动而移动,即会固定在所能到观察浏览器界面的固定地方

注:普遍使用方式为子绝父相,即子元素绝对定位,父元素相对定位

可以使用z-index: 来进行优先级显示

静态定位:

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到top,bottom,left,right影响。

固定定位:

元素的位置相对于浏览器窗口是固定位置。

margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。  

图9中,使用margin属性布局相对定位元素。

层级关系为:

<div ——————————— position:relative不是最近的祖先定位元素,不是参照物

<div—————————-没有设置为定位元素,不是参照物

<div———————- position:relative 参照物

<div box1

<div box2 ——–position:absolutetop:50pxleft:120px

<div box3


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存