CSS中五种常见定位方式总结_F11 - 专业站长和开发者的学习网站

分享到

CSS中五种常见定位方式总结

css 来源：互联网作者：佚名发布时间：2024-04-24 22:22:01 人浏览

摘要

1. CSS的position属性值 static：默认值，元素在正常的文档流中，不会被特别定位。 relative：相对于元素在文档流中的初始位置进行定位的。 absolute：相对于最近的已定位（非static）祖先元素定位

1. CSS的position属性值

static：默认值，元素在正常的文档流中，不会被特别定位。
relative：相对于元素在文档流中的初始位置进行定位的。
absolute：相对于最近的已定位（非static）祖先元素定位。
fixed：相对于浏览器窗口定位，即使窗口滚动，元素也会停留在指定位置。
sticky：基于滚动位置在relative和fixed定位之间切换。

定位方式	绝对定位	相对定位	固定定位	粘性定位	静态定位
定位原点	相对于最近的已定位祖先元素	相对于元素自身在文档流中的位置	相对于浏览器窗口	相对于最近的定位上下文	元素在正常文档流中的位置
位置参考	相对于已定位的祖先元素	相对于元素自身原始位置	浏览器窗口	相对于最近的定位上下文	文档流中的位置
滚动影响	随着页面滚动而移动	随着页面滚动而移动	固定在浏览器窗口某个位置	随着页面滚动而移动，滚动到一定距离则不滚动	随着页面滚动而移动
元素位置调整	通过top、right、bottom、left属性	通过top、right、bottom、left属性	通过top、right、bottom、left属性	通过top、right、bottom、left属性	不可调整

2. 用于定位元素的属性

top, right, bottom, left：这些属性用于指定元素相对于其包含块（通常是父元素）的位置。它们只对使用了相对定位、绝对定位、固定定位或粘性定位的元素有效。

z-index：指定元素的堆叠顺序。数值越大，元素越靠上。具有更高z-index值的元素会显示在具有较低z-index值的元素上方。

3. 定位类型详解及示例

1. 静态定位

默认的定位方式。元素按正常的文档流进行排列，不会因为定位属性而改变位置。此时，top、right、bottom、left和z-index属性将不会有任何效果。

2. 相对定位

允许你根据元素本身的原始位置进行调整。它不会脱离文档流，但会让空间保留在原来的位置。

.relative-box {

position: relative;

}

3. 绝对定位

元素脱离了文档流，其位置是相对于最近的定位祖先确定的。如果没有定位祖先，它将相对于文档的初始边界进行定位。

.absolute-box {

position: absolute;

}

4. 固定定位

元素相对于视窗进行定位，因此滚动页面时，它的位置不会改变。通过固定定位，可以创建固定在页面某个位置的元素，比如导航栏或悬浮广告。

.fixed-box {

position: fixed;

}

5. 粘性定位

结合了相对和固定定位的特性。当页面滚动到特定位置时，粘性元素会“粘住”视窗的某个位置。元素在跨越特定阈值前是相对定位的，之后变为固定定位。这种定位方式常用于创建滚动时固定在页面顶部或底部的元素，比如导航栏。

1 2	.sticky-box { position: sticky;

4. 注意事项

1. 影响文档流

绝对定位和固定定位会使元素脱离正常文档流，这可能会影响其他元素的布局。

2. 堆叠顺序

使用 z-index 控制元素的堆叠顺序时要小心，确保不会出现意外的覆盖情况。

3. 性能

使用大量定位元素可能会影响页面的性能，特别是在移动设备上。

4. 兼容性

不同浏览器对定位属性的解释可能略有不同，需要进行测试以确保在各种浏览器中的兼容性。

5. 滚动条

使用固定定位时要注意，元素固定在浏览器视窗中，可能会导致长内容的页面出现不必要的滚动条。

5. 实际运用

1. 子绝父相

父元素 .parent 设置相对定位，而子元素 .child 则设置绝对定位，并通过 top 和 left 属性将其定位在父元素的中心。通过 transform: translate(-50%, -50%); 来使子元素在垂直和水平方向上都居中。这样，子元素相对于父元素进行绝对定位，即子绝父相。

HTML 代码：

子元素

</div>

CSS 代码：

.parent {

position: relative; /* 父元素设置相对定位 */

width: 300px;

height: 200px;

}

.child {

position: absolute; /* 子元素设置绝对定位 */

top: 50%; /* 相对于父元素的50%处垂直定位 */

left: 50%; /* 相对于父元素的50%处水平定位 */

transform: translate(-50%, -50%); /* 通过平移来使子元素居中 */

}

2. 吸顶效果

要实现 CSS 中的吸顶效果，可以使用 position: sticky 属性。这个属性可以使元素在滚动到特定位置时固定在页面上，就像是吸附在顶部一样。

.header 元素使用 position: sticky;，并且设置 top: 0; 以确保它固定在页面顶部。当滚动页面时，.header 将保持在视口的顶部

<div class="header">这是一个吸顶头部</div>

<p>这是页面的内容。当滚动页面时，头部会固定在顶部。</p>

</div>

<style>

.container {

width: 100%;

height: 1500px; /* 用于演示滚动效果 */

padding-top: 50px; /* 让内容不被固定的头部遮挡 */

}

.header {

position: -webkit-sticky; /* 兼容性写法 */

position: sticky;

top: 0; /* 在顶部固定 */

background-color: #333;

z-index: 1000; /* 如果有其他元素在顶部需要覆盖，则可以使用 z-index */

}

</style>

您可能感兴趣的文章 :

原文链接 :

Tag : css(316)定位(10)

CSS实现dom脱离文档流定位固定位置的代码

在CSS中，要使一个DOM元素脱离正常的文档流并定位在页面的右顶部，你可以使用position属性。通过设置position: absolute;或position: fixed;，可以将
CSS中五种常见定位方式总结

1. CSS的position属性值 static：默认值，元素在正常的文档流中，不会被特别定位。 relative：相对于元素在文档流中的初始位置进行定位的。
stylus入门使用方法

Stylus 是一种富有表现力、动态的、健壮的 CSS 预处理器，它可以让你用更加高效、简洁的方式来编写 CSS。与其他 CSS 预处理器（如 Sass 和
css3 iphone玻璃透明气泡完美实现

最近在一个私活做手机项目时候，需要实现一个类似ios 6中短信那样的气泡效果。这里分享下实现心得，希望能给大家一点启发。首先分析
巧用 :has & drop-shadow实现复杂布局效果

最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：正常而言，我们的 HTML 结构大致
纯CSS实现多标签自动显示超出数量的思路介绍·

css实现：有多个宽度不同的标签水平排列，当外层宽度不足时，会自动提示超出的数量实现思路 CSS 如何动态累计数字？利用 CSS计数器 1
CSS设置水平垂直居中的7种方法总结

1. 水平居中 - 文本或行内元素使用 text-align 属性 1 2 3 .parent { text-align: center; /* 子元素如果是内联或内联块元素，将会水平居中 */ } 1 2 3 4
CSS设置背景模糊周边有白色光晕(解决方案)

css设置背景模糊周边有白色光晕，如何解决？ 1 2 3 4 div class=img-box img :src=xxx.png div class=img-bg :style={background-image: `url(`+ xxx.png+ `)`}/div /div 1 2
CSS实现渐变式圆点加载动画

知识点： animation 时间函数 steps()。用 css3 模拟一个渐变式圆点加载效果。核心代码部分，简要说明了写法思路；完整代码在最后，可直接
html table+css实现可编辑表格的代码

要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29