文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )

一、绝对定位 ---- 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中.../* 顶部偏移量 50 像素 */ top: 50px; /* 左侧偏移量 50 像素 */ left: 50px; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位...; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 1、父容器没有定位的情况下为子容器添加定位 下面这种情况就是 父容器没有定位 , 子元素 相对于浏览器进行定位 ; 完整代码示例 :..., 子容器相对于浏览器进行定位 ; 2、父容器有定位的情况下为子容器添加定位 在上面代码的基础上 , 为父容器添加 relative 相对定位 , 不设置边偏移 , 也就是位置相对于标准流的原始位置偏移

1.2K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    容易被误解的overflow:hidden

    overflow:hidden并不隐藏所有溢出的子元素 对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁...这个大家其实比较熟悉，一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素（更正：浏览器内容区域）。...（2012-09-05: 如果给body元素指定宽高且不指定position:relative，则body也不是绝对定位子元素的包含块。...这就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军，他们不受日本的法律约束而受美国军法约束。...翻译： 一个绝对定位的后代块元素，部分位于容器之外。

    3.9K110

    寒假提升 ｜ Day9 CSS 第七部分

    :nth-of-type 计数时只计算同种类型的元素,会排除所有的干扰项 三....，子元素的绝对定位都是相对于父元素进行定位 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是: 父元素设置position: relative(让父元素成为定位元素，而且父元素不脱离标准流...，直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定(绝对)定位; sticky是相对于最近的滚动祖先包含滚动视口的( the nearest ancestor scroll container...如果是兄弟关系 ✓ z-index越大，层叠在越上面 ✓ z-index相等，写在后面的那个元素层叠在上面 如果不是兄弟关系 ✓ 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较 ✓...认识浮动 float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

    1K20

    CSS进阶03-定位体系，格式化上下文，常规流

    绝对定位 Absolutr Positioning 。在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。...absolute：盒的位置（还可能包括大小）由 top 、 right 、 bottom 、 left 属性指定。这些属性是相对于盒的包含块来指定移动距离的。绝对定位盒脱离文档流。...right 此属性指定绝对定位盒的right margin edge在其包含块的right edge向左偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的right edge。...属性值如果是百分比，则是根据其包含块的width来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。...left 此属性指定绝对定位盒的left margin edge在其包含块的left edge向左偏移的距离。对于相对定位的盒子，偏移量是相对于盒子本身在标准流中位置的left edge。

    2.1K10

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 ) 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 ) 【CSS...; 6、相对定位 相对定位 是 盒子模型 相对于 其在 标准流中的位置 设置的 ; 如 : 盒子模型 在标准流 中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是 相对于原来的位置 (...则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位...; 上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点...绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位

    2.1K10

    年度实用技巧 | 页面上吸顶的效果是怎么做到的

    吸顶超出父容器重叠元素粘性定位知识点定位以下知识内容来自于菜鸟教程属性名作用属性值position指定了元素的定位类型。static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。...relative 定位相对定位元素的定位是相对其正常位置。...absolute 定位绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于htmlsticky 定位基于用户的滚动位置来定位。...实现方案类型实现方案吸顶使用fixed定位的元素的位置相对于浏览器窗口是固定位置，可以实现吸顶的效果。超出父容器使用absolute绝对定位的元素的位置相对于最近的已定位父元素，可以超出父元素。...第一步：选中一个想查看代码的功能项；第二步：将查看的功能的代码进行复制；第三步：将代码粘贴到一个空档html文档中；第四步：右键操作这个新建的 html 文档，选择在浏览器中打开，刚才的功能就在页面中出来啦

    28120

    深入理解视觉格式化模型

    现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...绝对定位结合margin实现垂直居中 很多设计都可以抽象为“一个元素相对于父级（或包含块）在垂直方向或水平方向上居中对齐”的模式，根据实际情况又可分为该元素的尺寸未知和已知两种情况。...短语“一个框的包含块”指的是“这个框存在其中的包含块”，而非它生成的框。 每个框会相对于其包含块赋予位置，但它并不囿于包含块，可能会溢出（overflow）。...并非所有的块容器框都是块级框：非替换行内块（inline blocks）和非替换表格单元格都是块容器，但不是块级框。既是块级框也是块容器的框称为块框（block box）。...（文章开头的问题中未设置四值，等同设置为auto√） 对于绝对定位元素，四值指定的是元素margin边与包含块的边之间的偏移量。对于相对定位元素，四值指定的是相对于自身框边的偏移量。

    1K90

    深入理解视觉格式化模型（ VISUAL FORMATTING MODEL）

    现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...绝对定位结合margin实现垂直居中 很多设计都可以抽象为“一个元素相对于父级（或包含块）在垂直方向或水平方向上居中对齐”的模式，根据实际情况又可分为该元素的尺寸未知和已知两种情况。...短语“一个框的包含块”指的是“这个框存在其中的包含块”，而非它生成的框。 每个框会相对于其包含块赋予位置，但它并不囿于包含块，可能会溢出（overflow）。...并非所有的块容器框都是块级框：非替换行内块（inline blocks）和非替换表格单元格都是块容器，但不是块级框。既是块级框也是块容器的框称为块框（block box）。...（文章开头的问题中未设置四值，等同设置为auto√） 对于绝对定位元素，四值指定的是元素margin边与包含块的边之间的偏移量。对于相对定位元素，四值指定的是相对于自身框边的偏移量。

    75030

    ：CSS 相对定位和绝对定位有什么区别？

    效果： 元素相对于其默认位置向下偏移 20 像素，向右偏移 30 像素。...1.2 绝对定位 (position: absolute;) 概念： 绝对定位是相对于最近的已定位祖先元素进行定位，如果没有找到，则相对于根元素（ 或 ）定位。... 效果： 粉色块相对于灰色容器的左上角偏移 10 像素和 20 像素。...如果灰色容器没有 position: relative;，粉色块会相对于整个页面定位。 2. 进阶问题：两者的主要区别 问题 2：相对定位和绝对定位的区别是什么？...实战问题：开发中的应用技巧 问题 3：如何结合相对定位和绝对定位实现复杂布局？ 场景： 假设需要在一个固定宽高的容器中，精确定位一个悬浮按钮。

    26910

    【CSS3】CSS3 3D 转换示例 - 盒子模型翻转示例 ( 开启透视视图 | 设置过渡动画 | 设置 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型背靠背效果 )

    告诉浏览器 该 盒子模型 及 子盒子模型 所有 可过渡 的属性值在 0.5 秒内平滑地改变 ; 设置 3D 呈现样式 盒子模型 的 父容器 和 子容器 都可以设置 3D 变换效果 , 如果要为 子容器...3D 变换效果 */ transform-style: preserve-3d; 上述代码 告诉 浏览器 子容器盒子模型 保留其的 3D 变换效果 , 即 子盒子模型 的 3D...效果 是 相对于它们自己的 3D 空间 , 而不是相对于父元素的平面 ; 鼠标移动到控件上方效果 :hover 是一个 伪类选择器 , 该选择器 表示 用户与页面进行交互的一种状态 , 即 鼠标指针停留在...父容器中设置 相对定位 , 根据 子绝父相 原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ; 第一个子容器 显示在正面 , 正常设置即可 ; 第二个子容器 显示在背面 , 此时需要 绕...子绝父相 子盒子使用了绝对定位 父盒子就要使用相对定位 */ position: relative; /* 父盒子 和 子盒子 使用不同的 3D 变换效果

    69900

    一文掌握css常见布局float、position、flex、grid

    float [浮动]文字环绕图片浮动最开始的作用是去实现类似报纸的那种文字环绕图片的效果，如图，设置了浮动的元素会尽可能的显示在父级元素的顶部一加 left/right部位，看起来就像是给元素做了绝对定位...，但是跟绝对定位区别的一点是，该元素边产生了浮动流，以至于其相邻的元素会向右或者想左靠近该元素，而不是跟绝对定位一样，相邻的元素会忽略该元素的所在位置，直接铺满整个空间。...relative属性一是用来相对于自己的默认位置来做定位，更多的场景是只是用他来做一个定位标记给里面的absoute元素提供定位点。...absoluterelative是相对于自己本身的默认位置坐定位，absolute是相对于自己最近一层有定位属性的父级元素来做定位，这个定位属性可以是relative，可以是absolute，也可以是absolute...定位元素相对于它来做位置的偏移。

    60010

    【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )

    : 通过定位样式移动盒子 : 相对定位 relative 样式 , 绝对定位 absolute 样式 ; 通过设置盒子外边距 : 外边距 margine 样式 ; 2D 转换中的 Translate...移动 ; transform: translate() 样式 ; Translate 移动 相对于其它方式 移动盒子模型 的优点 : 使用 Translate 移动标签元素 , 不会影响其它元素的位置...; 下面的 translate 中使用了百分比单位 , 该百分比是相对于标签元素自身的尺寸来说的 ; 代码示例 : 执行结果 : 四、Translate 百分比移动实现绝对定位的居中效果...---- 在之前使用 绝对定位 进行居中设置时 , 首先 , 走到父容器的一半位置 ; 然后 , 再往回走子元素的一半距离 ; 此时就可以实现元素居中设置 ; 在设置 第二步 的时候 , 子元素需要往回走一半距离

    1.4K30

    CSS 面试要点：定位(Positioning)

    同时，元素的位置发生变化，top，bottom，left 和 right 以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的分析。...结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且 元素也被包含在这个容器里面。...绝对定位元素在 HTML 源代码中，是被放在 中的，但是在最终的布局里面，它离页面 (而不是 ) 的左边界、上边界有 30px 的距离。...https://codepen.io/cellinlab/pen/xxYymGb # 固定定位 固定定位 fixed，与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。

    87610

    建议收藏！总结了42种前端常用布局方案

    定位实现水平垂直居中方案(一) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 减去宽度/高度的一半 实现CSS代码如下： .parent { /* 1....定位实现水平垂直居中方案(二) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 通过外边距-值的方式将元素移动回去 实现CSS代码如下： .parent {...定位实现水平垂直居中方案(三) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 将子元素拉满整个容器 通过margin:auto实现水平垂直居中 实现CSS代码如下： .parent {...定位实现水平垂直居中方案(四) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 通过 translate 反向偏移的方式，实现居中 实现 CSS 代码如下：...绝对定位的方式 通过绝对定位的方式实现Sticky Footer布局的步骤如下： 设置最外层容器高度为100%； 让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%； 在中间区域设置padding-bottom

    5.1K30

    建议收藏！总结了 42 种前端常用布局方案

    定位实现水平垂直居中方案(一) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 减去宽度/高度的一半 实现CSS代码如下： .parent { /* 1....定位实现水平垂直居中方案(二) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 通过外边距-值的方式将元素移动回去 实现CSS代码如下： .parent {...定位实现水平垂直居中方案(三) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 将子元素拉满整个容器 通过margin:auto实现水平垂直居中 实现CSS代码如下： .parent {...定位实现水平垂直居中方案(四) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 通过 translate 反向偏移的方式，实现居中 实现 CSS 代码如下：...绝对定位的方式 通过绝对定位的方式实现Sticky Footer布局的步骤如下： 设置最外层容器高度为100%； 让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%； 在中间区域设置padding-bottom

    5K30

    6-css样式

    背景颜色background-color 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb 背景图片background-image 背景图片的大小可以和容器大小不一样 背景图片不会占位 如果容器大...，背景图片小，背景图片会平铺 铺满整个容器 背景图片位置background-position 背景图片定位的值是两个单位，分别代表坐标x,y轴 背景图片定位的值可以是应为left,right,top,...bottom,center 背景图片重复background-repeat no-repeat数组图像不重复，常用 round自动缩放直到适应并填充整个容器 space以相同的间距平铺且填充整个容器 背景图片定位...position 层模型，绝对定位（相对于父类） 如果想为元素设置层模型中的绝对定位，需要设置position:absolute绝对定位，这条语句的作用加你个元素 从文档流中拖出来，然后使用left,...right,top,bottom属性相对于其最接近的一个 具有定位属性的父包含块进行绝对定位。

    2.4K20

    CSS 中你需要知道 auto 的一切！

    是，如果我们将元素item的宽度更改为100％而不是auto会发生什么？ 该元素将占用其父项的100％，加上左侧和右侧的边距。...这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...，但会增长以吸收flex容器中的任何额外自由空间，并会收缩到其最小尺寸以适合该容器，这等效于设置“ flex：1 1 auto”。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。 考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。...好吧，原因是绝对定位的元素相对于其最接近的父元素具有position：relative。 该父项具有padding: 16px，因此子项位于顶部和左侧的16px处。 有趣，不是吗？

    7.1K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券