CSS绝对定位没有父级或则父级无定位情况

最新推荐文章于 2024-08-04 12:04:01 发布

zzf2.0

最新推荐文章于 2024-08-04 12:04:01 发布

阅读量500

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/m0_46744635/article/details/108102578

版权

当CSS元素使用绝对定位，但缺少父级定位时，会导致定位失效。本文探讨如何在没有父级定位或者父级无定位的情况下实现元素的绝对定位，包括利用body作为定位基准、使用CSS伪类以及调整元素层级等技巧。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zzf2.0

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS基础------详细了解position相对定位、绝对定位和固定定位

coderWang

03-19

411

前言上一篇文章了解了浮动float 文章地址:https://blog.csdn.net/qazzwx/article/details/104923386 这边文章主要了解position属性相对定位、绝对定位和固定定位一、position属性的定义和用法 1.1、如上图所示，一个盒子压住另一个盒子增加层次感用浮动是做不了，如果盒子浮动会并排但不会出现有层级的观感。...

前端绝对定位—没有父级或父级无定位情况

qq_43247538的博客

07-09

361

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。语法｛position:absolute;｝ 绝对定位的特点: 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。

1 条评论您还未登录，请先登录后发表或查看评论

CSS：绝对定位 - 没有父级或者父级无定位情况

最新发布

听海边涛声

08-04

264

CSS：绝对定位 - 没有父级或者父级无定位情况

CSS绝对定位-父级有定位的情况

m0_46744635的博客

08-20

506

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS绝对定位-父级有定位的情况</title> <style> ...

CSS之定位中绝对定位的子绝父相说法有误，子绝原来不一定父相

qq_44156869的博客

02-20

1114

借知乎的回答如下解释：首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。 绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。 ...

什么是css绝对定位与相对定位,CSS相对定位与绝对定位

weixin_39664136的博客

08-04

1091

1.相对定位Position : relative ;特点：1 如果没有定位偏移量，对元素本身没有任何影响；2 不使元素脱离文档流，空间是会被保留；3 不影响其他元素布局；4 left、top、right、bottom是相对于当前元素自身进行偏移的。代码：初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非...

绝对定位元素被遮挡的解决方法

09-25

具体来说，当你设计网页时，如果遇到绝对定位元素被遮挡的情况，首先检查该元素的父级容器是否有相对定位属性。如果没有，需要给父级容器加上一个z-index值。这个值只需要比其他可能造成遮挡的相对定位元素的z-index...

CSS教程:position 绝对定位的问题

01-19

今天做页的时候，遇到了一个问题：div无法对父对象绝对定位。 <div id=fa> <div id=so xss=removed> </div> 但是发现无论怎么调整都是针对body定位，郁闷！看了下css手册，也没发现有什么不对。到网上查了下，发现...

css绝对定位盒子如何继承父级元素大小

07-27

当父级元素没有设置定位时，绝对定位的盒子会相对于浏览器窗口进行定位，而不是相对于父级元素。\[3\]当父级元素有定位时，绝对定位的盒子会相对于最近的定位祖先元素进行定位。如果没有定位祖先元素，它会相对于...

父元素没有设置定位 position absolute 解析

qq_45670012的博客

10-19

445

1、示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" conten...

组团学-定位(position)-zutuanxue.com

树明聊运维

06-03

404

定位(position) CSS三个大核心模块：盒模型、浮动和定位，其余的都是细节。为什么要用定位？举例，京东商城网页… 如果说浮动的主要目的是让多个块级元素在一行显示，那么定位的主要价值就是移动元素位置，让元素移动到我们想要的位置上去。元素的定位主要包括偏移属性和定位模式来实现。一、偏移属性说明用来描述定位元素各边相对于其包含块的偏移量。偏移属性说明 top 顶部偏移量，元素相对于其父元素上边线的距离 right 右侧偏移量，元素相对于其父元素右边线的距离 b

相对父级元素定位

剑阁青枫

12-22

548

如果要相对父级元素定位，则使用position:absolute; left:10px; top:20px;但是如果嵌套了多层，父级元素需要加position:relative;才能成功css：position属性

CSS学习第三周

Zhangzanhao的博客

02-13

323

字体阴影字体阴影的属性是text-shadow，它要填四个要素，分别是水平位置，竖直位置，模糊程度，阴影颜色在阴影颜色后加上一个逗号可继续写下一个阴影的属性

position定位属性

Schrodinge的博客

05-03

888

一、定位：position 1.static 默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 2.absolute 相对于父级元素的绝对定位，浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“ri...

为什么绝对定位（absolute）的父级元素必须是相对定位

骆小胖~

10-24

6705

【总结】如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。 绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。 .