css定位

css定位

为什么要用定位

CSS 定位属性是控制网页中元素位置的一种方式，它能够让元素在页面上精准地落在我们想要的位置。在 CSS 中，定位（Positioning）是控制元素在页面上如何定位和显示的一种机制

定位的几种分类

1. 静态定位（static）：这是 position 属性的默认值。元素按照源码顺序决定位置，遵循“正常的页面流”（normal flow）。每个块级元素占据自己的区块，不会产生重叠。注意，top、bottom、left、right 这四个属性在此情况下无效.
2. 相对定位（relative）：相对于默认位置（即 static 时的位置）进行偏移。定位基点是元素的默认位置。需要搭配 top、bottom、left、right 属性一起使用，用来指定偏移的方向和距离.
3. 绝对定位（absolute）：相对于上级元素（一般是父元素）进行偏移。定位基点是父元素。注意，父元素不能是 static 定位，否则定位基点会变成整个网页的根元素。同样需要搭配 top、bottom、left、right 属性使用12.
4. 固定定位（fixed）：相对于视口（浏览器窗口）进行偏移，即定位基点是浏览器窗口。元素的位置不随页面滚动而变化，好像固定在网页上一样。需要搭配 top、bottom、left、right 属性使用.
5. 粘性定位（sticky）：具有动态效果，类似于相对定位和固定定位的结合。元素在某些情况下是相对定位（定位基点是自身默认位置），在其他情况下自动变成固定定位（定位基点是视口）。因此，它能够形成“动态固定”的效果。例如，网页的搜索工具栏，初始加载时在自己的默认位置，但页面向下滚动时，工具栏变成固定位置，始终停留在页面头部.

几种定位各自的特点

1. 静态定位（static）

   • 默认值，如果省略 position 属性，元素会被视为静态定位。
   • 元素按照源码顺序决定位置，遵循“正常的页面流”。
   • 不会对其他元素的位置产生影响，也不支持 top、bottom、left、right 属性。

2. 相对定位（relative）：

   • 相对于默认位置（即 static 时的位置）进行偏移。
   • 定位基点是元素的默认位置。
   • 需要搭配 top、bottom、left、right 属性一起使用，用来指定偏移的方向和距离。

   <style>
       .relative-box {
           position: relative;
           left: 20px;
           top: 10px;
       }
   </style>
   <div class="relative-box">相对定位的元素</div>
   
   

3. 绝对定位（absolute）：

   • 相对于上级元素（通常是父元素）进行偏移。
   • 定位基点是父元素。
   • 父元素不能是 static 定位，否则定位基点会变成整个网页的根元素。
   • 同样需要搭配 top、bottom、left、right 属性使用。

   <style>
       .parent {
           position: relative;
       }
       .absolute-box {
           position: absolute;
           top: 0;
           right: 0;
       }
   </style>
   <div class="parent">
       <div class="absolute-box">绝对定位的元素</div>
   </div>
   
   

4. 固定定位（fixed）：

   • 相对于视口（浏览器窗口）进行偏移。
   • 定位基点是浏览器窗口。
   • 元素的位置不随页面滚动而变化，好像固定在网页上一样。
   • 需要搭配 top、bottom、left、right 属性使用。

   <style>
       .fixed-box {
           position: fixed;
           top: 20px;
           right: 20px;
       }
   </style>
   <div class="fixed-box">固定定位的元素</div>
   
   

5. 粘性定位（sticky）：

   • 具有动态效果，类似于相对定位和固定定位的结合。
   • 元素在某些情况下是相对定位（定位基点是自身默认位置），在其他情况下自动变成固定定位（定位基点是视口）。
   • 可以形成“动态固定”的效果，例如页面的搜索工具栏。

   <style>
       .sticky-box {
           position: sticky;
           top: 50px;
       }
   </style>
   <div class="sticky-box">粘性定位的元素</div>
   
   

请注意，sticky 定位的应用需要搭配 top、bottom、left、right 属性，并且浏览器支持度较好。

子绝父相布局

子绝父相：当子元素使用绝对定位时，其父元素应该使用相对定位作为参照物。具体来说：

• 子级绝对定位不占有位置，可以放在父盒子内的任何地方，不会影响其他兄弟盒子。
• 父盒子需要加定位，限制子盒子在父盒子内显示。因此，父元素通常使用相对定位。
• 相对定位的父级能够占有位置，不会影响其他元素的布局。

这个原则确保了子元素在使用绝对定位时，能够相对于父元素进行正确的定位。如果父元素没有定位，子元素无法自由移动或固定，因此父级必须使用相对定位。

显示隐藏的几种方式以及区别

1. display: none;：

   • 使用此属性，元素会完全从页面布局中移除。
   • 元素原本所占据的位置会被其他元素占据，导致浏览器的重排和重绘。
   • 不会触发元素绑定的事件，也不会有过渡效果。

   <style>
       .hidden-element {
           display: none;
       }
   </style>
   <div class="hidden-element">这是一个隐藏的元素</div>
   
   

2. visibility: hidden;：

   • 元素在页面上仅仅是隐藏，DOM 结构依然存在，只是处于不可见的状态。
   • 元素依然占据自己的位置，对网页布局起作用，但不会触发用户交互。
   • 如果想让子元素显示，可以设置子元素的 visibility: visible;。

   <style>
       .hidden-element {
           visibility: hidden;
       }
   </style>
   <div class="hidden-element">这是一个隐藏的元素</div>
   
   

3. opacity: 0;：

   • 将元素的透明度设置为 0，也可以视为一种隐藏。
   • 元素依然存在于页面中，但变得隐形，仍然占据空间。
   • 可以触发点击事件。

   <style>
       .hidden-element {
           opacity: 0;
       }
   </style>
   <div class="hidden-element">这是一个隐藏的元素</div>
   
   

4. 设置盒模型属性为 0：

   • 将元素的 margin、border、padding、height 和 width 等属性设置为 0。
   • 如果元素内有子元素或内容，也应该设置其 overflow: hidden; 来隐藏子元素。
   • 这样元素相当于消失，无法触发点击事件。

   <style>
       .hidden-element {
           margin: 0;
           border: 0;
           padding: 0;
           height: 0;
           width: 0;
           overflow: hidden;
       }
   </style>
   <div class="hidden-element">这是一个隐藏的元素</div>
   
   

er: 0;
padding: 0;
height: 0;
width: 0;
overflow: hidden;
}

这是一个隐藏的元素

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=C%3A%5CUsers%5CDongTaomin%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20240707204151018.png&pos_id=img-19VjDvTO-1720356292901)