CSS position: fixed 相对于父元素定位

最新推荐文章于 2024-04-21 22:38:54 发布
最新推荐文章于 2024-04-21 22:38:54 发布
阅读量1.1w 收藏 7
点赞数 12
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48003149/article/details/121850887
版权

        使用 fixed 进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的 transform, perspective 或 filter 属性不为 none 时，position为fixed 的元素就会相对于父元素来进行定位。

示例：https://codepen.io/ythinker/pen/xxXEbXoicon-default.png?t=LA92https://codepen.io/ythinker/pen/xxXEbXo

        如果父级元素的层级比其兄弟节点低，就算fixed的层级比父级元素及其兄弟元素高，它也会被父级元素的兄弟元素遮挡住。

示例：https://codepen.io/ythinker/pen/zYEKxaQicon-default.png?t=LA92https://codepen.io/ythinker/pen/zYEKxaQ

三千数优一
关注
  • 12
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
前端面试题：relative、absolute、fixed分别相对于谁定义？
qq_46582421的博客
02-28 2229
relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。 fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “le.
position:fixed 相对父元素定位
weixin_30364147的博客
11-05 917
position:fixed是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样： 不设置fixed元素的top，bottom，left，right，只设置margin来实现。 这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。 此外，position:fixed元素会受到父元素的影响，而出现不能以窗口进行定位： 1. 因为fixed元素并不总是...
CSS基础：position定位的5个类型详解！
最新发布
u013179804的博客
04-21 1210
CSS 中的positionstatic：默认值，relative：相对定位，absolute：绝对定位，fixed：固定定位，sticky：粘性定位。因为positiontop：距离定位父元素或包含块顶部的距离。right：距离定位父元素或包含块右侧的距离。bottom：距离定位父元素或包含块底部的距离。left：距离定位父元素或包含块左侧的距离。这四个方位属性可以使用像素(px)、百分比(%)、em 等单位来指定距离，正负值皆可以。
position:fixed相对父级元素定位而不是浏览器
weixin_30699443的博客
07-10 1140
position:fixed默认是相对浏览器定位的 原理：fixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位 代码：http://jsbin.com/tegodideyi/edit?html,css,output HTML布局： <!DOCTYPE html> <html> <head&g...
fixed布局相对于父级容器定位问题及transform影响
weixin_41359197的博客
04-14 1538
<template> <div> <div class="parent"> <div class="children"></div> </div> </div> </template> <style> .parent{ position: fixed; left: 50px; width: 300px; height: 300px; border: 1px .
CSS——fixed 固定定位相对于父容器
diaopinglan6176的博客
06-27 1582
position:fixed固定定位 用 left top都是相对于浏览器的。 我今天想给网页做一个固定定位的导航偶然间发现。可以用margin相对于父容器定位。 小伙伴们可以试试。 不用lefttop 用margin-left试试 -小收获 转载于:https://www.cnblogs.com/ruogu/p/11096647.html...
css 子元素相对父元素固定定位
CiCi2012_3_6的专栏
04-27 1416
position:fixed 默认是相对浏览器窗口定位的 实现相对父级元素定位如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>子元素相对父元素固定定位</title> <style> .grand {
使用CSS样式position:fixed水平滚动的方法
09-04
首先，理解`position:fixed`的工作原理，它将元素相对于浏览器视口定位，而不是相对于其父元素。这意味着当页面滚动时，设置了`position:fixed`的元素会保持在屏幕的同一位置。但默认情况下，`position:fixed`只处理...
CSS实现模拟position的fixed页面定位效果
09-25
为了使其在页面滚动时保持在屏幕上的固定位置，我们将其父元素设置为 `position: relative`，这样 `.fixed` 就相对于其父元素定位。然后，我们将 `.fixed` 的 `top` 和 `left` 属性设置为其在页面上的理想位置。 ...
javascript ie6兼容position:fixed实现思路
12-02
在网页设计中，`position:fixed` 是一种CSS定位方式，它允许元素相对于浏览器窗口进行定位，而不是相对于其父元素。这种定位模式在创建固定头部、侧边栏或浮动导航栏时非常有用，因为无论用户如何滚动页面，这些元素...
CSS教程:CSS中的定位（position）
12-08
4. `fixed`（固定定位）：元素的位置相对于浏览器窗口固定，即使页面滚动，元素仍然保持在屏幕的特定位置。在滚动条滚动时，元素不会移动，适用于创建固定顶部菜单或侧栏。 举个例子，如果要实现一个居中且有绝对...
fixed相对父元素定位
02-13
fixed默认是相对浏览器定位的，在开发中，经常会用到相对某个元素定位，思路就是障眼法，多套一个div
css3 position fixed固定居中问题解决方案
09-25
在CSS3中，`position: fixed` 是一个非常有用的属性，它使得元素相对于浏览器窗口保持固定的位置，即使页面滚动，该元素也会保持在屏幕上的同一位置。然而，当尝试将一个`position: fixed`的元素居中时，常规的居中...
【相对定位，绝对定位，fixed固定定位，sticky粘性定位】
weixin_49919737的博客
08-05 521
【相对定位，绝对定位，fixed固定定位，sticky粘性定位】
父级fixed_如何使position:fixed;相对于父元素定位？
weixin_39694264的博客
12-22 761
展开全部一、解决思路:????这是我们希望的效果，但是没法直接实现我们想让特定子元素相e69da5e6ba9062616964757a686964616f31333363396462对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样????实质上是chil...
子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案
yangqii的博客
12-16 5910
最近在编码过程中，遇到过这样一个问题，代码如下，我们有一个父级，他有一定的宽度，在他的里面有两个子级，其中一个是绝对定位的，且要求他们的宽度都和父级保持一致，然后问题就出现了，我们会发现，有了定位的son他的宽度远远的超出了我们父级的宽度，那么问题是怎么引起的呢 <divclass="fathor"style="width:1024px"> <divclass...
父级fixed_父元素设置absolute,子元素设置fixed定位失效
weixin_39955938的博客
12-22 1460
如下代码，应该一目了然<div class = "relative"><div class ="absolute"><div class="fixed"></div></div></div>里面的元素原本是正常定位的，需要动态改成fixed，又不能把元素移到外层，怎么解决？fixed相对于body定位，而不是相对于父元素abs...
relative相对于谁定位_CSS3中absolute、relative、fixed定位详解
weixin_36222664的博客
01-24 429
点击“前端全栈之家”关注我们01定位显示在CSS中可以通过postion属性定义元素定位显示，语法如下：postion: static|relative|absolute|fixed1. static: 表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。2. absolute: 表示绝对定位，将元素从文档流中拖出来，然后使用left、right、t...
CSS属性详解——position:fixed
Wod_7的博客
06-04 9627
CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。
position:fixed 相对父元素
08-30
position:fixed 相对父元素来说，如果父元素的transform、perspective或filter属性不为none时，fixed元素会相对于父元素进行定位，而不是相对于视窗。 这意味着，如果父元素发生变换，如平移或旋转，那么固定定位的子元素也会受到影响。 另外，还有一种称为sticky粘性定位的方式，它是相对定位(relative)和固定定位(fixed)的结合，主要用在对滚动事件的监听上。当滑动过程中，某个元素距离其父元素的距离达到sticky定位的要求时，比如设置了top: 100px，那么这个元素就会保持在父元素的指定位置，直到滚动到达一定位置后才会继续跟随滚动。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS position: fixed 相对于父元素定位](https://blog.csdn.net/weixin_48003149/article/details/121850887)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [position:fixed 相对父元素定位](https://blog.csdn.net/weixin_30364147/article/details/99902985)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [详解css粘性定位position：sticky问题采坑](https://download.csdn.net/download/weixin_38716081/13681269)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值