Blogger Information
Blog 19
fans 0
comment 0
visits 10685
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
绝对定位与固定定位以及两者差异
期待.
Original
687 people have browsed it

1.绝对定位

  • 我对绝对定位的理解(如果理解上存在问题的,希望大家帮我改正):绝对定位永远相对于它的上级的定位元素(比如定位父元素或定位祖先元素),当逐级向上级查找定位元素并且找不到时,就放到HTML标签的父元素叫最初包含块,理解上来说,就是我们看到的整个页面,也就是视口.
  • 当绝对定位找不到上级定位元素时.
    找不到上级定位元素
  • 当定位元素为父级DIV时.
    定位元素为父级DIV
  • 那么我们可以看到,绝对定位找到它的父级定位元素,DIV,那么就被定位到了父级DIV上.

    2.固定定位

  • 我对固定定位的理解(如果理解上存在问题的,希望大家帮我改正):固定定位永远相对于视口而言,它不需要上级定位元素.
    固定定位演示
  • 我们可以看到,即使父级DIV设置了position,但是固定定位还是定位到了标签之外,也就是视口.

    3.两者差异

  • 绝对定位是相对于上级定位元素的,当找不到时,回到最初包含块,从理解和视觉上看,就是视口.且在页面长度过高时,绝对定位只能留在第一屏.
  • 固定定位永远是相对于视口而言,不需要上级定位元素.且就算页面长度过高,也可以留在整个页面中.
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post