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

【CSS】margin 外边距负值使用案例 ( 正常外边距 | 使用外边距负值实现边框重叠 | 重叠边框突出显示 )

body> 显示效果 : 三、重叠边框突出显示案例 ---- 1、使用相对定位 三种布局机制中 , 标准流在最底层 , 浮动盒子在中间层 , 定位盒子在最上层 ; 这里使用 定位 中的相对定位..., 相对定位仍然会占用原来的位置 , 元素还在原来的位置不动 ; 如果使用了绝对定位 , 原来的位置就会消失 , 元素默认显示在定位的父容器左上角 ; 代码示例 : <!...盒子的样式 */ div:hover { /* 突出显示的盒子设置红色边框 */ border: 1px solid red; /* 设置相对定位 该定义可以占有原来的位置 */...2、使用 z-index 设置定位盒子层级 父元素相对定位 , 内部子元素可以使用绝对定位任意摆放位置 , 大部分盒子都有该要求 ; 如果将所有的盒子都设置相对定位 , 则使用 z-index...{ /* 父元素相对定位 内部子元素可以使用绝对定位任意摆放位置 大部分盒子都有该要求*/ position: relative; /* 浮动元素紧贴在一起

1.6K20

CSS-定位(position)

所谓静态位置就是各个元素在HTML文档流中默认的位置。 在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...，可以将元素的定位模式设置为绝对定位。...# 父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 # 子绝父相 这个“子绝父相”太重要了，是我们学习定位的口诀。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 # 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

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

    脱离文档流分析（转）

    脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。  ...个人理解：相对定位后的元素则会叠加到新位置的上，覆盖原先新位置上的元素，但是在新位置上不实际占据空间）如下图所示，头像相对定位前在box1盒子下方，头像相对定位后，头像原来的位置空着，但是下方的带有文本的盒子并没有移动上来...（3）绝对定位 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层...另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。   　　图9中，使用margin属性布局相对定位元素。

    1.7K20

    前端入门4-CSS属性样式表声明正文-CSS属性样式表

    紧接着，继续处理 div3 元素，因此之前 div2 块级元素已经霸占了第一行了，所以此时是在第二行处理 div3 元素，发现它也是一个浮动元素，便以当前位置将其抽离到另一层面绘制。...也都是通过 left, top, right, bottom 来根据参考掉调整位置。 releative 相对定位 相对定位并不是相对于父元素，而是相对于该元素原本所应该在的位置作为参考点。...另外，相对定位并不会改变元素在文档流中的位置，也就是这个元素原本占据哪个坑，通过相对定位微调之后，仍占据那个坑，只是视觉上它发生了移动而已。有点类似 Android 中的 View 动画。...因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。...浮动元素造成的重叠只是盒子上的重叠，并不会造成元素内容上的重叠，那么也就没有使用 z-index 的必要，因为要呈现的内容并不会被覆盖。

    2.1K30

    第213天：12个HTML和CSS必须知道的重点难点问题

    12个HTML和CSS必须知道的重点难点问题 这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？...注意 relative 移动后的元素在原来的位置仍占据空间。 **absolute:绝对定位。...3.3 清除浮动的方法 方法1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    2.7K20

    CSS 定位布局 - 相对、绝对、固定三种定位

    在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？ 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...当设置绿色的div为绝对定位之后，发现黄色的div不见了。 其实，黄色的div并不是不见了，而是跟绿色的div重叠了。...因为当绿色div设置为绝对定位之后，就会脱离文档流布局，此时绿色的div就相当于漂浮了起来，黄色的div就没有被绿色div挤下来，自然就上去与绿色div重叠在一起了。 那么下面来设置一下偏移看看。...先看看原来基于父级定位的绝对定位的div情况如下： ? 将绿色div的绝对定位改为固定定位，如下： ?...定位元素特性 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。 理解练习 制作如下布局： ? 首先写两个div出来，如下 ? 将数字5的div定位到第一个div的右上角 ?

    4K40

    详解 清除浮动 的多种方式（clearfix）

    relative 元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留 语法 属性：position 取值：relative 配合着 偏移属性(top/...right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置...3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定 语法 属性：position 取值：absolute...配合着 偏移属性(top/right/bottom/left)实现位置的固定 5、固定定位 fixed 将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动 语法 属性：position...> div class="top">上div> div> div class="bottom">下div> ?

    1.8K60

    知识整理之CSS篇

    position: absolute 绝对定位，脱离常规流。此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。...transform: scale(0); 将元素设置无限缩小，元素不可见，元素所在位置被保留。 height: 0; 将元素高度设置为0，并消除边框。...可能原因： 使用import方法导入样式表 将样式表放在页面底部 有几个样式表，放在html结构的不同位置 原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。...此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。 解决方法: 使用link标签将样式表放在文档head中 什么是外边距重叠？ 重叠的结果是什么？...标准属性在后(优化) 可维护性 将css文件放在页面最上面 样式与内容分离：将css代码定义到独立css文件中 重绘和回流的描述及优化方案 这部分涉及内容较多，请移步至浏览器的回流和重绘及其优化方式

    2.1K20

    【前端就业课 第二阶段】CSS 零基础到实战（04）定位

    一、定位 定位分为相对定位以及绝对定位。 相对定位可以理解为在 HTML 中，元素会依照原有的顺序进行显示，通过相对距离（例如左右距离多少）的方式使这些元素进行位置的显示。...绝对定位可以理解为，在 HTML 中，元素并不会按照有序的方式进行排列，需要依靠自身给予的定位信息决定元素出现在 HTML 页面中的位置。 1.1 文档流 我们在了解定位前，需要了解什么是文档流。...中通过 position 属性对网页中的元素进行定位，position 属性支持以下 5 个值： static（默认） relative absolute fixed sticky 在本章开始时，了解了相对定位和绝对定位...，而后又了解了 position 定位的属性值，这些值对应了相对定位和绝对定位，例如： 相对定位的 position 属性值有 relative 绝对定位的值有 absolute 、fixed 、sticky...div，但是其本身的位置还是存在，我们可以通过示例看出： index-z 在使用绝对定位时，若发生了覆盖，想使其中一个定位元素现实于另外一个定位元素之上，可以使用 z-index 属性，该属性可以更改当前页面元素的层级

    42420

    Web前端学习 第2章 网页重构9 css定位

    css定位相关的属性，定位可以分为三类: 绝对定位 相对定位 固定定位 二、css定位详解 我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right...绝对定位 将一个元素设置下面的属性： 1 element{ 2 position:absolute; 3 } 元素就变成了一个绝对定位元素，实例代码如下所示。 1 从上面代码的效果中，我们可以了解以下几点： 相对定位元素不脱离文档流，元素占位，第一个div和第三个div不相邻，中间的间距就是相对定位元素的位置。...当混轮滚动的时候，固定定位元素永远相对于窗户的位置定位。 设置参照物 理解了上面三种定位方法，我们再来考虑开始提到的那个问题，如果我们希望将一个数字列表压在一张图片之上。...如果父级需要根据视窗的显示位置而变化位置，可以设置固定定位。 一般父级容器不设置绝对定位。

    61930

    【融职培训】Web前端学习 第2章 网页重构9 css定位

    css定位相关的属性，定位可以分为三类: 绝对定位 相对定位 固定定位 二、css定位详解 我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right...绝对定位 将一个元素设置下面的属性： 1 element{ 2 position:absolute; 3 } 元素就变成了一个绝对定位元素，实例代码如下所示。 1 从上面代码的效果中，我们可以了解以下几点： 相对定位元素不脱离文档流，元素占位，第一个div和第三个div不相邻，中间的间距就是相对定位元素的位置。...当混轮滚动的时候，固定定位元素永远相对于窗户的位置定位。 设置参照物 理解了上面三种定位方法，我们再来考虑开始提到的那个问题，如果我们希望将一个数字列表压在一张图片之上。...如果父级需要根据视窗的显示位置而变化位置，可以设置固定定位。 一般父级容器不设置绝对定位。

    45710

    css 定位

    一、相对定位 position: relative 相对默认的布局位置进行定位，也就是相对自己应该在的位置来定位。...二、绝对定位 position: absolute .box { position:absolute; top:10px;//相对定位点，从上到下偏移10px left:10px; //相对定位点，从左到右偏移...绝对定位元素也看不见绝对定位元素。所以下图2个box2发生了重叠 ? 绝对定位的定位对象是从它的父元素找是否有relative/fix/absolute。...所以使用absolute绝对定位的时候，最好在父元素上设置相对定位relative。 ? 设置绝对定位之后，块级元素宽度会收缩，宽度由内容决定。行内元素可以设置宽高，内外边距。 ? ?...四、固定定位 position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。 比如说浏览器右边 回到顶部的按钮就是采用的固定定位。

    1.7K20

    CSS 定位和层叠上下文

    它允许将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。 # 固定定位 给一个元素设置 position: fixed 就能将元素放在视口的任意位置。...绝对定位不是相对视口，而是相对最近的祖先定位元素。跟固定元素一样，属性 top、right、bottom 和 left 决定了元素的边缘在包含块里的位置。...它们还是围绕着被移走元素的初始位置，跟随着正常的文档流。 跟固定或者绝对定位不一样，不能用 top、right、bottom 和 left 改变相对定位元素的大小。...有时可以用这些属性调整相对元素的位置，把它挤到某个位置，但这只是相对定位的一个冷门用法。更常见的用法是使用 position: relative 给它里面的绝对定位元素创建一个包含块。...改变固定定位元素的标记位置不会产生不好的影响，但是对相对定位或绝对定位的元素来说，通常无法用改变标记位置的方法解决层叠问题。相对定位依赖于文档流，绝对定位元素依赖于它的定位祖先节点。

    1.6K20

    CSS---网络编程

    ，则这个对象移动，给那个漂浮过来的对象让出一行位置，让他们不会重叠） ☆CSS布局——定位 ◇ position : static | absolute | fixed | relative static...absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。...relative :　对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。 absolute —绝对定位。...如果某个对象用了绝对定位，其实就相当于这个对象漂浮在另一个层面（重叠），而原来层面上自己占的位置被其他模块覆盖。 relative —相对定位。...如果某个对象用了相对定位，也相当于这个对象漂浮在另一个层面（重叠），但是原来层面上自己占的位置不会被其他模块覆盖。

    1.4K20

    【Web前端】“CSS 定位”如何工作？（补充）

    二、定位基础 CSS定位属性允许我们改变元素在文档流中的位置，从而实现更复杂的布局效果。CSS提供了几种不同的定位方式：静态定位、相对定位、绝对定位、固定定位和粘性定位。...class="static">这是一个静态定位的元素div> 相对定位 相对定位允许我们相对于元素的默认位置进行调整。...class="relative">这是一个相对定位的元素div> 元素相对于它的默认位置被移动了50px到右边和20px到底部。...即使元素视觉上移动了，文档流中的位置不变。 绝对定位 绝对定位使元素脱离文档流，完全按照我们指定的位置进行排列。...div> 两个绝对定位的元素在 ​​.container​​ 内重叠，​​box2​​ 的 ​​z-index​​ 值大于 ​​box1​​，因此 ​​box2​​

    77710

    Css 详细解读定位属性 position 以及参数

    基础资料 首先，我们可以到 W3SCHOOL 关于 position 的详细介绍 页面，来看一下position的资料。...元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...inherit 继承父元素，基本上这个参数用得相当少，所以也不做过多的解释。 文档流布局的概念 什么是文档流布局？...使用绝对定位，使用了为负数的偏移值，我们来看一下效果图，如下： 从上图我们可以看到，test2如我们所愿的，相对于自身的位置发生了偏移，而test3则相对于test2发生了偏移。...如果test3也是相对于文档定位的话，那么它和test2应该是重叠的。 但是，我们根据上面的解释，test3应该相对于test2定位才对，那么是不是呢？

    1.7K10

    HTML和CSS常见问题整理

    值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。...center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度

    1.8K30

    【CSS3】 float浮动与position定位常见问题（个人笔记）

    3.相对定位不脱离标准流，即使离开了原位置，还会在原位置占有。...，然后黑色上移，被紫色覆盖，但是黑色上留了一段距离，这是因为红色相对定位后在标准流位置的占有，挤走了黑色。...，但是绝对定位（完全脱离了标准流）只显示了最后面一个最大的div，绝对定位和有浮动都是脱离标准流，右浮动是在标准流的基础上往上面加了一层  也就是第二层 所有的浮动元素都在第二层显示，所以他们按顺序排列了起来...绝对定位呢  绝对定位是层级加一，第一个绝对定位div是3层（我为什么不说是二层呢，因为前面说了定位层级大于浮动层级），第二个是4层，第三个是五层所以他们重叠了起来了。...，然后margin，平分两边，进行的水平垂直居中，这样的水平居中都是相对于定位元素居中的，如果绝对定位相对于根元素的话，就是网页中间。

    65840
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券