Position:定位

已于 2024-11-03 13:38:25 修改
阅读量555 收藏 6
点赞数 4
文章标签： css
于 2024-11-03 13:38:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixin5456985/article/details/143464530
版权
Position:定位

绝对定位(跳出常规视图层)

position: absolute;会被放在<html>的外面,也就是初始容器中,初始容器就是浏览器视口,html也被放在初始容器中.当然,这是默认行为,如果它的父容器中声明了position且其属性值不是默认值static,那么绝对定位就会以父容器定位.个人经验,绝对定位要和相对定位配合使用效果才好,不然感觉用起来和固定位置(fixed)没啥区别,配合也很简单,在父容器中声明一个相对定位就行了.

固定位置(跳出常规视图层)

position: fixed;这个算是真的完全以视口宽度作为定位,在页面上固定一个位置,可以用来做固定导航,客服按钮等等.

相对定位

position: relative;还在原来的视图层,只不过可是用top/bottom/left/right来改变位置.

滚动定位(粘性定位/滚动索引)

position: sticky;必须要设置一个top或left作为阈值,可以实现滚动菜单的效果.就是在滚动菜单项/列表项的时候其标题总是在顶部显示,当进入下一个分类的时候会被下一个标题覆盖.

image-20241103040652290

同时如果出现多个定位元素,可以使用z-index:1来更改层叠顺序.

你可以更改堆叠顺序吗？是的，你可以使用z-index属性。 “z-index”是对 z 轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x 轴）和垂直（y 轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x 和 y 轴跨页面向右和向下（适合从左到右的语言，无论如何）。

网页也有一个 z 轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0。

文档链接

怪咖学生
关注
跨浏览器的实践:position:fixed 层的固定定位
10-30
`position: fixed` 是 CSS 中的一个定位属性，用于实现这种效果。然而，由于不同浏览器之间的兼容性问题，使用 `position: fixed` 时可能会遇到一些挑战，特别是在老旧的浏览器如 Internet Explorer 6 中。 在给定...
JS解决position:sticky的兼容性问题的方法
11-30
如果不支持，我们在`init`方法中添加滚动监听器，当元素滚动到指定位置时，改变`sticky-warp`的`position`属性，使其在滚动时固定或绝对定位。在组件被停用时，我们需要恢复原始状态，以防止影响其他操作。 总结...
position属性，fixed层级问题
KangTongShun的博客
05-11 5353
一、前言 今天遇到了一个关于position： fixed 层级的css问题 设置了position属性为非static的时候，他的层级是怎样比较的呢？ 是根据z-index属性的大小来比较的。 二、代码 那么看下面代码： <div class="box1"> <div class="fixed1"> </div> </div> <div class="fixed2"/> <styl
低端机position fixed 绝对定位不显示
第二世界
08-13 439
修复 用元素滚动替代界面滚动 #page { width: 100vw; height: 100vh; overflow-y: scroll; overflow-x: hidden; }
CSS定位属性position详解、定位分类、定位层级
xu_yuxuyu的博客
11-07 2039
html零基础必看——html入门，编程就是如此简单 第十一章：position定位属性1.认识定位position属性1.1什么是定位1.2 position 属性的五个值2. 定位分类2.1 静态定位 position: static ；2.2 相对定位 position: relative;2.3 绝对定位 position: absolute;2.4 固定定位 position: fixed;2.5 粘性定位 position: sticky;3.定位层级z-index4.使用定位让元素
CSS 定位
豆子的博客
06-30 525
目录一相对定位 二绝对定位三固定定位四粘滞定位五绝对定位元素布局定位： 更加高级的布局手段 - 定位指的就是将指定的元素摆放到页面的任意位置 通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值： static： ['stætik] 默认值，元素没有开启定位 relative： ['relətiv] 开启元素的相对定位 absolute： ['æbsəlju:t]
前端基础(十三)_定位position、定位层级z-index
见贤思齐焉，见不贤内自省
12-20 1987
定位position、定位层级z-index
css中position:fixed实现div居中上下左右居中
09-25
与之相对的是position:absolute，它会将元素定位在最近的已定位祖先元素中，如果没有则相对于初始包含块（通常是视口）。 要实现DIV的完全居中，需要结合使用position:fixed以及通过调整left、top、right、bottom...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
CSS定位position的层级关系问题
weixin_44703582的博客
10-11 1874
目录 前言 一、position是什么？ 二、position属性 1.静态定位(static) 2.绝对定位（absolute） 3.相对定位（relative） 4.固定定位（fixed） 三、层级关系 示例：​ 总结 前言 CSS属性一共有x、y、z三条轴，但z轴只有使用了position属性时，z轴上的层级关系才体现出来，所以z-index这个属性只有定位元素才有。 一、position是什么？ position 属性规定元素的定位类型。 二、positi
ios 系统中 position: fixed 和 z-index
MichaelAn的博客
09-09 1631
ios 系统中 position: fixed 界面滚动问题 问题描述 某个组件中，设置了部分元素 position: fixed 后，在 iOS 设备中滚动卡顿，部分内容显示卡顿。当界面停止滚动，内容显示正常。 在桌面浏览器测试正常，在安卓设备测试正常，在 ios 各种浏览器都不正常（iphone - ipad）。基本判断是系统兼容性问题。 截图如下： 解决结果 因为水平滚动设计元素宽度问题，我首先测试了界面中元素的尺寸。在 chrome 中尺寸显示正常。 因为这个组件内容宽度可变，所以初始 css 中
html div图层置顶,完全CSS实现鼠标移上出现层的效果（超简单）
weixin_31510505的博客
05-31 708
看过许多鼠标事件，都很复杂，太多的文件和繁杂的代码,而且好多都是用js实现，加载速度很慢。这几天一直在找一种简单的实现效果，完全 CSS编写的效果，现在找到了，非常的少。这就是完全 CSS实现的层效果，真的很不错的，稍微美化一下就非常好了。希望大家多提意见……CSS.demo ul{position:relative;padding:0;margin:0;font-size:12px;}.demo...
css定位属性position:fixed
最新发布
wangooo的博客
01-02 6335
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
定位、固定定位、层级、定位居中方法
weixin_69474097的博客
07-19 1077
定位、固定定位、层级、定位居中方法
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
热门推荐
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
position为fixed时设置z-index失效
重口味码农
11-17 2万+
作为一个假的前端，在调试一个页面时出现了如下bug。 左侧的菜单固定为fixed时，二级菜单无法设置有效的z-index，导致菜单隐藏在页面元素之下，明明页面元素的z-index是1，但是无论把菜单的z-index设置为多大，都不管用。查阅了资料，原来谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给
前端面试题HTML+CSS基础篇——三栏布局
xiaomao_wxj的博客
08-08 353
如何实现一个左右宽度固定，中间自适应的三栏布局呢 下面就来介绍一下具体的实现方案吧！ 1. float浮动 2. position定位 3. flex布局 4 1. float浮动
position:fixed 父子层关系
heartOfblack 离开了电脑，我不希望我还有病
11-15 1197
当元素被设置成fixed的时候，会创建新的层叠上下文，设置z-index只能在当前的层级上下文做比较，而无法跨层级比较。举个例子，以下的DOM结构 伪代码 <app> <div fixed> <dialog fixed z-index=2002> </div> </app> <modal fixed z-index=2001&g...
position+元素层级
weixin_43719397的博客
12-02 2120
1、position设置元素的定位方式 left right top bottom 相当于坐标点和参考点的关系 1、默认值为static 静态 2、relative 相对定位 相对于自己的位置偏移 3、absolute 绝对定位 相对于非static最近的父级元素 一般来说是relative的 4、fixed 固定定位 一般相对于视窗 2、z-index（只对设置了position的元素起作...
position: relative居中定位
08-19
要在相对定位 (position: relative) 的元素中居中定位，可以使用以下步骤： 1. 在该元素的父元素上应用一个定位上下文 (position: relative 或 position: absolute)。这是为了确保子元素的定位是相对于父元素而不是整个页面。 2. 将要居中的元素的左右外边距设置为 "auto"，并将左右定位属性设置为 0。这将使元素水平居中。 3. 将要居中的元素的上下外边距设置为 "auto"，并将上下定位属性设置为 0。这将使元素垂直居中。 下面是一个示例代码： ```html <style> .parent { position: relative; width: 200px; height: 200px; border: 1px solid black; } .child { position: relative; width: 100px; height: 100px; background-color: red; margin: auto; /* 水平和垂直居中 */ top: 0; bottom: 0; left: 0; right: 0; } </style> <div class="parent"> <div class="child"></div> </div> ``` 在上面的示例中，父元素具有相对定位，并设置了宽度和高度。子元素具有相对定位，并设置了宽度、高度、背景颜色以及居中的样式。通过将外边距设置为 "auto" 和定位属性设置为 0，子元素在父元素中水平和垂直居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值