开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS -位置绝对受同级边距的影响

CSS中的位置绝对（position: absolute）是一种定位方式，它允许我们将元素相对于其最近的已定位祖先元素进行定位。当使用位置绝对时，元素会脱离正常的文档流，并且可以通过top、bottom、left和right属性来指定其在页面中的精确位置。

位置绝对受同级边距的影响是指，当一个元素使用位置绝对进行定位时，它的位置会受到其同级元素的边距影响。具体来说，如果一个元素的同级元素具有边距（margin），那么这些边距会影响到使用位置绝对进行定位的元素的位置。

例如，假设有两个同级元素A和B，元素A使用了位置绝对进行定位，并且元素B具有上边距（margin-top）。那么元素A的位置会受到元素B的边距影响，即元素A的位置会相对于元素B的上边距进行调整。

这种影响是由于元素的边距会占据一定的空间，而使用位置绝对进行定位的元素会相对于其祖先元素进行定位。因此，如果同级元素具有边距，那么它们的边距会占据一定的空间，进而影响到使用位置绝对进行定位的元素的位置。

需要注意的是，这种影响只会在同级元素之间产生，对于其他祖先或子元素的边距不会产生影响。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：提供高性能、可扩展的 MySQL 数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos

相关搜索:css -根据内容高度更新div页边距/位置 CSS从一条边到另一条边的绝对过渡位置 css的边距兼容问题 CSS网格模板中的边距 CSS边距减去jQuery中的等于 CSS边距设置与旋转的问题 HTML/CSS -我找不到的幻影边距为什么行内块元素的边距会影响同级行内块元素使用JavaScript更改页边距位置后，如何保留CSS元素？使用绝对位置管理边距

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

文章目录一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距二、清除元素默认的内外边距 1、清除方式 2、代码示例三、行内元素边距设置一、元素默认的外边距 ---...*/ padding: 0; /* 清除标签默认的外边距 */ margin: 0; } 上述代码是所有的 CSS 标签的第一行代码 ; 2、代码示例代码示例 :...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...background-position 修改图片显示位置 */ background-position: 50px 50px; } span { /* 行内元素设置四个方向的边距

2.4K1 0

《精通CSS》第3章可见格式化模型

相应的，span、strong这些是行内元素，所以它们会以行内盒子(简称行盒子，inline box)显示在行内。 CSS 中有几种不同的定位模型，包括浮动、绝对定位和相对定位。...这时，元素盒子的位置，由在 HTML 中的位置决定。块级盒子会沿垂直方向堆叠，盒子在垂直方向上的间距由他们的上、下外边距决定。行内盒子是沿文本流水平排列的，也会随文本换行而换行。...最后，内边距、边框和外边框可以应用于元素的四边，也可以单独用于某一边。外边距甚至可以使用负值，从而使得元素在页面中移动。...浮动折行浮动元素在浮动时不仅会受到同级浮动元素的影响，还会受非同级元素的影响。如下图所示，第二组浮动盒子会受到第一组盒子的影响。 ?...浮动受非同级元素影响如上，这种情况下，第二组合子挂在了第一组盒子的左边。如果我们不想让第二组的盒子 1 挂在第一组的盒子 3 左边应该如何处理呢？

1.3K2 0

【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )

文章目录一、内边距不影响盒子模型尺寸的情况二、内边距影响盒子模型尺寸的情况一、内边距不影响盒子模型尺寸的情况 ---- 如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子...DOCTYPE html> 内边距不影响盒子模型尺寸的情况</title...padding-left: 50px; } 内边距不影响盒子模型尺寸的情况 ... 展示效果 : 测量模型宽度 : 测量模型高度 : 二、内边距影响盒子模型尺寸的情况 ---- 如果给 p 标签设置了具体的尺寸 , 为其设置 Padding 内边距 ,...DOCTYPE html> 内边距不影响盒子模型尺寸的情况</title

1.3K2 0

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

width:auto; padding:0px 10px;//设置左右内边距为10px margin:0px 10px;//设置左右外边距为10px height...证明毫无影响 1.3子元素绝对定位，则分两种情况讨论默认情况下以body元素宽度为参考基准我们把inner-100percent对应的style改成： .inner-100percent{...（这里不做展示） 2.浮动／定位对width:auto的影响 2.1默认情况下，width:auto占满一行不做展示 2.2子元素相对定位，无影响，仍占满一行不做展示 3.3子元素绝对定位，固定定位...2.浮动流的起始位置由最先设置浮动的元素未浮动时的位置决定我们再回到上述的例子，div2,div3,div4向左浮动的时候 ? 浮动流的起始位置被最先设置浮动的元素原本的位置决定了。...刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。浮动元素会影响文本的位置！

2K11 0

css 笔记

*内补白（内补丁） padding：检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px; padding-top...：检索或设置对象顶边的内部边距 padding-right：检索或设置对象右边的内部边距 padding-bottom：检索或设置对象下边的内部边距... padding-left：检索或设置对象左边的内部边距 7....*外补白（外补丁） margin：检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto; margin-top...：检索或设置对象顶边的外延边距 margin-right：检索或设置对象右边的外延边距 margin-bottom：检索或设置对象下边的外延边距

2.2K4 0

css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。...绝对定位的使用：绝对定位的时候，该元素的父元素一定要记得设为相对定位，这样在不同分辨率下定位才不会错乱，但是前提是这个父元素在一个安全的宽度里面，如果这个父元素本身是一个会因为分辨率降低而改变的元素...而是在放大图背景的div里继续放一个安全宽度div，再把它作为父元素做相对定位，给里面的子元素做绝对定位，这样就不会出现不同分辨率下绝对定位错乱的问题了。...1 $(function(){ var w=window.screen.width; var zoom=w/1920; 2 $("#container").css...scale，则该缩小相当于当前页面下缩小的效果了，两边自然会留白。

3.3K7 0

CSS3入门

当设置为border-box时，width和height就是最终宽高，不再受padding影响外边距塌陷同—列上下两个元素相邻，并且上有margin-bottom，下有margin-top时，会发生塌陷...scroll : 清除浮动，左侧和下方加滚动条定位将盒子定在页面的某一个位置（漂浮) 定位由两部分组成：定位模式：相对定位、绝对定位、固定定位、静态定位边偏移：top、left、fight、bottom...静态定位(static) 就是无定位，无法使用边便宜来调整盒子的位置。...相对定位相对定位(relative)是元素相对于自己在标准流中原来的位置不会放弃它在标准流中占据的位置 *{ position: relative; } 绝对定位绝对定位(absolute...)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置如果父元素没有定位，则找父级的父级，..…. 。

1.6K1 0

CSS入门？一篇就够了！

多类名选择器我们可以给标签指定多个类名，从而达到更多的选择目的。注意： 1. 样式显示效果跟HTML元素中的类名先后顺序没有关系, 受CSS样式书写的上下顺序有关。 3....四边样式四边颜色; 表格的细线边框以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。...浮动脱离标准流，不占位置，会影响标准流。...对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

5.1K2 0

一道面试题来看伪元素、包含块和高度坍塌

边距塌陷(Collapsing margins) 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距，称为边距塌陷。...不会发生边距坍塌的情况根节点元素水平边距(Horizontal margins)不会崩溃「如果具有间隙的元素的顶部和底部相邻，他会与后续同级的元素边距一起坍塌，但是不会与父元素底部的一起坍塌（If...盒子的上边距和第一个流入子元素的上边距盒子的下边距和同级后一个流入元素的上边距如果父元素高度为“auto”，最后一个流入子元素的底部距和其父元素的底部距某个元素没有建立新的 BFC，并且 min-height...，当边距全为正数的时候，结果页边距宽度是边距塌陷宽度的最大值。...2.当边距全为负数的时候，取最小值。 3.在存在负边距的情况下，从正边距的最大值中减去负边距的绝对值的最大值。

1.1K2 0

Web 前端 | 面试题 | 笔记

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。...important 声明 > 其它 2.3 CSS 盒子模型 CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。...BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...的值不为visible BFC的使用场景去除边距重叠现象清除浮动（让父元素的高度包含子浮动元素）避免某元素被浮动元素覆盖避免多列布局由于宽度计算四舍五入而自动换行 3.

7334 0

css学习笔记，持续记录。

最后一个同级兄弟元素 :only-of-type CSS3唯一的一个同级兄弟元素 :nth-of-type() CSS3第n个同级兄弟元素 :nth-last-of-type() CSS3倒数第n个同级兄弟元素...4. inline-block 使用 inline-block 布局之后元素之间去除边距等因素后，无法完全紧靠的原因：为了方便理解，可以将 inline-block 容器内的元素看成是两个文字，文字与文字之间不可能是连在一起的...，absolute生成绝对定位的元素，是相对于 static 定位以外的第一个父元素进行定位；relative则是生成相对定位的元素，相对于其正常位置进行定位。...要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈，此空格其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。...BFC是一个独立的容器，内部元素不会影响容器外部的元素。属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。计算BFC高度时，浮动元素也要参与计算。

2.6K6 0

前端面试（1）H5+css

盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容，可以简单表述为盒模型由 content，padding，margin，border 几部分组成。...属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 的区域不会与 float box 重叠。 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...阻止外边距 margin 折叠塌陷 1、阻止外边距折叠 margin 塌陷问题：在标准文档流中，块级标签之间竖直方向的 margin 会以大的为准，这就是 margin 的塌陷现象。...BFC，左盒子设置右外边距，右盒子设置左外边距(不设置也可)，右盒子不需要设置 width; 三栏布局，已知左右侧宽度，中间自适应 1.使用定位三个盒子外侧设置大盒子，大盒子使用相对定位，下面一层三个盒子均采用绝对定位...fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。

1.3K2 0

网页布局基础

要知道，完全大小的元素，你还必须添加填充（padding），边框（border）和边距。....aotu 会根据浏览器的宽度自动的设置两边的外边距。...也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。...相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 absolute（绝对定位）和fixed（固定定位）都属于绝对定位形式 ?

1.8K2 0

CSS学习笔记二

和height指的是内容区域的宽度和高度；增加内边距、边框和外边距不会影响内容区域的尺寸控件，但是会增加元素框的总尺寸； ?...display属性：定位机制： CSS基本定位机制：普通流，浮动和绝对定位除非专门单独定义，否则所有框都是默认在普通流中定位块级框从上到下一个接一个排列，框之间的垂直距离是由框的垂直外边距计算出来的...行内框在一行内的水平布置，使用水平内边距、边框、外边距来调整之间的间距，但是，垂直内边距、边框和外边距不影响行内框的高度，由一行形成的水平框：行框（Line Box），行框的高度总是容纳包含的所有行内框...属性描述 position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。...绝对定位：absolute 绝对定位：通过设置垂直或水平位置，让元素绝对定位（以视窗左上角做起点） #box { position: absolute; left: 30px;

1.2K3 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...必须提出的是，垂直方向的padding对于那些具有 display:inline 的元素不适用，比如或。如果添加了内边距，它不会影响元素，内边距将覆盖其他内联元素。...Flexbox 间隙 gap 是一个提议的属性，将用于CSS Grid和flexbox，撰写本文时，它仅在Firefox中受支持。...关于解决方案2，它没有CSS特异性问题。但是，它只能处理一个列栈。更好的解决方案是通过向父元素添加负边距来取消不需要的间距。....wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。注意不要超过边距值，因为它会与同级元素重叠。

11.9K1 0

揭示不为人知的CSS

很多人喜欢这个属性，如果你正在建立一个网格系统，或任何其他需要水平对齐类型的布局项目，这可以是更直观的工作方式。边距重叠当边距意外重叠当时候，真的令人很困惑，因为你不知道发生了什么。...当两个或多个相邻的垂直边距接触时，边距有时会发生重叠，并且不会用填充或边框分隔。如果子元素的边缘扩展到父元素的边缘，并且不会被填充分隔开，那么就会出现边距重叠的现象。...如果元素采用的是绝对定位、浮动定位或者有一个不一样的格式化上下文时，边距不会发生重叠现象，以及在其他一些不太可能的情况下。如果你感到困惑，没关系。边距不会发生重叠的规则是复杂的。...您需要知道的主要事情是当元素没有填充或边框时，垂直边距可能会重叠。如果你想了解的更详细， CSS Tricks 有一篇很好的边距重叠释义的文章推荐你看一下。...这种技术仍然很重要，但它也正逐渐被新的布局技术所取代，比如Flexbox和Grid。绝对定位布局绝对定位的元素完全从文档流中去除，不同于浮动元素，它们对周围的内容没有影响。

1.6K3 0

快速理解BFC原理

绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...二、BFC 概念 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。...首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。...} p { width: 100px; height: 100px; background: lightblue; margin: 100px; } 这时候，两个盒子边距就变成了...width: 100px;height: 100px;background: #eee;float: left;"> 由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度

5902 0

大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。...7.2、边偏移简单说，我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。...7.3.4、固定定位(fixed) 固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形完全脱标 —— 完全不占位置；只认浏览器的可视窗口 ——...浏览器可视窗口 + 边偏移属性来设置元素的位置；跟父元素没有任何关系；单独使用的不随滚动条滚动。

1.8K2 0

HTMLCSS 常见面试题汇总

15、为什么要初始化CSS样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会出现浏览器之间的页面显示差异； CSS样式初始化之后会对SEO有一定的影响。...18、浮动元素引起的问题父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构...浏览器默认的 margin 和 padding 不同 IE6双边距bug 在IE6、IE7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的 min-height...重叠的结果是什么？外边距重叠就是margin-collapse；在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...这种合并外边距的方式称为折叠，并且因而所结合成的外边距称为折叠外边距；折叠结果计算规则：两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值；两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

1.5K2 0

知识整理之CSS篇

CSS选择器优先级、权重计算 CSS选择器的优先级选择器的优先级分为两种：1. 选择器在同一级别时。2. 选择器在不同级别时。 CSS选择器在不同级别时在属性后面使用!...positoon: relative 相对定位，相对于其正常位置进行定位，遵循常规流。并且设置top，right，bottom，left这4个属性进行偏移时，不会影响常规流中的任何元素。...盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠（触发BFC）。 position: fixed 固定定位，脱离常规流。...比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。...示意图： image.png 外边距重叠的意义外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。外边距重叠解决方案 1.

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭