HTML（第八章）标签：定位网页元素

最新推荐文章于 2023-08-30 20:03:26 发布

m0_61835031

最新推荐文章于 2023-08-30 20:03:26 发布

阅读量1k

点赞数

文章标签： html css3 css

本文链接：https://blog.csdn.net/m0_61835031/article/details/125695675

版权

本文详细介绍了HTML元素的定位技术，包括static、relative、absolute、fixed和sticky定位，以及它们在网页设计中的应用场景。同时，讨论了z-index属性在解决元素重叠问题上的作用，以及如何调整元素的堆叠顺序。此外，还提到了网页元素的透明度控制，如opacity属性和filter:alpha()的使用，以及在实际设计中应注意的事项。

摘要由CSDN通过智能技术生成

HTML（第八章）

标签：定位网页元素

定位网页元素

position 属性指定了元素的定位类型。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
偏移设置：top、left、right、bottom
static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

relative 定位

相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

absolute绝对定位

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
祖先元素通常是在父元素中设置relative 定位，可以不设置偏移量
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
绝对定位不设置偏移量
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
absolute和relative经常配合使用

fixed 定位

元素的位置相对于浏览器窗口是固定位置。类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

重叠的元素

z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index值大的层位于其值小的层上方
一个元素可以有正数或负数的堆叠顺序
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境，默认z-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可
标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
注意：如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。

sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。