CSS--解决position: absolute无效的问题_position: absolute; 无效-程序员宅基地

技术标签： CSS  css  html  position  

原文网址：CSS--解决position: absolute无效的问题_IT利刃出鞘的博客-程序员宅基地

简介

本文介绍CSS进行定位时使用 position:absolute （绝对定位）不起作用的问题。

问题复现

需求：已有一个外层的元素（class为"container"），这个外层元素已经设置了margin，现在有一个元素（class为"test"），放在这个外层元素里边，想要基于这个外层元素的margin进行绝对定位。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>

    <style>
        .container {
            margin-right: 100px;
        }

        .test {
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="test">
        测试
    </div>
</div>

<script>

</script>
</body>
</html>

结果

我们想要的结果：class为“test”的元素距离父元素右边界110px。

现在的结果：class为“test”的元素距离父元素右侧只有10px。

原因分析

absolute是相对于已定位的第一个父元素进行定位的。

已定位的含义：指定了position（不是默认的static）。

以上边的“问题复现”的为例：class为“container”的元素没有设置position，所以它position就是默认的static，这就导致内部的class位“test”的元素在找父元素的时候经历了如下步骤：

  1. 找它最近的父元素“class为“container”的元素”，发现position是默认的static，不满足条件，继续向上级找
  2. 找到body元素，发现body的position也是默认的static，不满足条件，继续向上级找
  3. 找到html元素，这已经是最外边的元素了，只能基于此进行定位了。

position的属性值

值

描述

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

sticky

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

inherit

规定应该从父元素继承 position 属性的值。

initial

设置该属性为默认值，详情查看 CSS initial 关键字。

解决方案

设置一下直接父元素的postion为非static的值（一般设置为relative即可）。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>

    <style>
        .container {
            margin-right: 100px;
            position: relative;
        }

        .test {
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="test">
        测试
    </div>
</div>

<script>

</script>
</body>
</html>

结果

可以看到，“测试”这两个字距离浏览器右侧的距离是110像素了。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feiying0canglang/article/details/121645939

智能推荐

transformer_transformer提出-程序员宅基地

文章浏览阅读3.2k次。transformer最早于2017年google机器翻译团队提出，也就是著名的《Attention Is All You Need》，transformer完全取代了以往的RNN和CNN结构，改为由transformer堆叠的方式构建模型。transformer在NLP领域首先取得了非常惊人的效果，随后DETR首次将transformer引入到了CV的目标检测任务重，随后VIT完全抛弃了CNN，改为完全由transformer实现基础的图像分类任务，之后transformer在CV领域的应用也变得一发_transformer提出

2-SAT问题-程序员宅基地

文章浏览阅读3.1k次，点赞2次，收藏12次。2-SAT问题_2-sat

【代码 C/C++】队列的链式实现_q.front-程序员宅基地

文章浏览阅读765次，点赞2次，收藏4次。【代码 C/C++】队列的链式实现_q.front

[Flink课程]---- 9.1 使用Ambari 搭建Flink 集群_ambari apache flink-程序员宅基地

文章浏览阅读9.4k次，点赞4次，收藏14次。1 前言1.1 概览 Stateful Computations over Data Streams(数据流的状态计算) Apache Flink是一个框架和分布式处理引擎，用于对无界和有界数据流进行有状态计算。Flink设计为在所有常见的集群环境中运行，以内存速度和任何规模执行计算。在这里，我们解释了Flink架构的重要方面。处理无界和有界数据任何类型的数据都是作..._ambari apache flink

ACM算法训练-程序员宅基地

文章浏览阅读962次，点赞17次，收藏11次。前端校招精编面试解析大全点击这里获取完整版pdf查看，同时减轻大家的负担。**[外链图片转存中…(img-zK9XvqAE-1712395244097)][外链图片转存中…(img-u8oO1QiU-1712395244098)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-0BcZtDWe-1712395244098)]

如何用人工智能自动玩游戏_ai玩游戏-程序员宅基地

文章浏览阅读4.6w次，点赞90次，收藏394次。让AI玩游戏的思想早在上世纪就已经有了，那个时候更偏向棋类游戏。像是五子棋、象棋等。在上世纪“深蓝”就击败了国际象棋冠军，而到2016年“Alpha Go”击败了人类围棋冠军。到现在，AI涉略的不仅仅是棋类游戏。像是超级马里奥、王者荣耀这种游戏，AI也能有比较好的表现。今天我们就来用一个实际的例子讨论AI自动玩游戏这一话题，本文会用非常简单的机器学习算法让AI自动玩Google小恐龙游戏。_ai玩游戏

随便推点

【监控】python查看显卡资源使用情况_python 查看显卡是否能调用-程序员宅基地

文章浏览阅读2.4k次。使用第三方库需要使用pynvml库官网：https://pythonhosted.org/nvidia-ml-py/下载文件地址：https://pypi.org/project/nvidia-ml-py/#history现阶段pip安装的命令为：pip install nvidia-ml-pypython查看代码如下import pynvmlpynvml.nvmlInit()# 这里的1是GPU idhandle = pynvml.nvmlDeviceGetHandleByIndex_python 查看显卡是否能调用

Lidar AI Solution环境配置_lidar scn-程序员宅基地

文章浏览阅读4.2k次，点赞15次，收藏49次。Lidar_AI_Solution环境配置_lidar scn

一站直达！！！了解Linux信息收集操作_)使用两种方式在用户信息文件中查看此用户信息(只看此用户),把结果分别存放于-程序员宅基地

文章浏览阅读966次，点赞28次，收藏16次。Linux系统信息收集操作大全，收藏随时查看！！！！_)使用两种方式在用户信息文件中查看此用户信息(只看此用户),把结果分别存放于

Git，Github和Gitlab简介和基本使用_公司项目为何不直接在gitlab上建立-程序员宅基地

文章浏览阅读318次。什么是GitGit是一个版本控制系统（Version Control System，VCS）。版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。多年前，我在法国做第一个实习时（2011年），那时候自己编程还在入门阶段，根本没听过版本控制系统。那时候真是蠢（现在也没好到哪里去），每次修改多一点的代码，就要复制、黏贴整个项目目录。因此，公司的电脑里有着几十个项目的副本（简直了）。前不久，我看到公司的一个实习生也在做和我多年前同样的事。而且我们问他，他说没听说过版本控制系统._公司项目为何不直接在gitlab上建立

nvm use 报错 nvm use 18.12.1 exit status 5: �ܾ����ʡ�_nvm use 18.19.1-程序员宅基地

文章浏览阅读342次。右键以管理员身份运行。_nvm use 18.19.1

蓝桥杯星期几/wps设置填充方式：按年/月/日填充_wps excel根据年份月份星期填日期-程序员宅基地

文章浏览阅读1.2k次。wps设置填充方式：按年/月/日填充1.首先在新建的WPS表格中输入某一天的日期，将开始一栏中的“常规”改为长日期2.点击表格的右下角黑色加号，下拉，下拉完成后会出现一个自动填充选项在如图位置 没截上3.点击填充选项，选择填充方式即可如图，以年填充4.右击选中的表格，选择设置单元格格式，类型选择为星期，即可查看某日是星期几如图..._wps excel根据年份月份星期填日期

推荐文章

热门文章

相关标签