锚点标记在绝对定位的div中不会占据完整的高度 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【CSS3】css开篇基础（4）

（当然前面的标准流不会被影响）这时如果想要不被影响，就要清除浮动，从而它们就能使浮动的盒子恢复到标准流中：高度能恢复成应有的高度，也不会被之前的标准流给重叠影响到，同时它们浮动盒子之间的布局也不会被影响...而且它还依然占有文档空间，占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动。也就是说相对定位并不会脱标，依然还是标准流，占据空间依然没变。...绝对定位绝对定位不会保留原来的位置（脱离文档流），那后面盒子就会往上占了它的位置；如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位；如果祖先元素有定位（可以是相对、绝对或者固定定位...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。...浮动元素不会压住标准流文字浮动元素会脱标，当它压住标准流时，文字不会被压住，会环绕在周围显示。而定位元素脱标压住标准流时，文字会被压住。

671 0

前端基础-CSS定位

总结： 1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置 2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置...），可以定义宽高，不占据标准流的空间 3.margin:auto对于设置过绝对定位的元素不起作用 4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义使用场景：配合相对定位使用..." /> div> 总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） —父相子绝...总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...绝对定位absolute 完全脱标，不占有位置可以相对于定位的父级移动位置固定定位fixed 完全脱标，不占有位置可以相对于浏览器移动位置 5.定位元素的层叠效果控制“定位”元素的叠放层级

6292 0

您找到你想要的搜索结果了吗？

是的

没有找到

《CSS世界》第六章流的破坏与保护总结

高度塌陷是为了让跟随的内容可以和浮动元素在一个水平线上。（行框盒子在正常定位状态下只会跟随浮动元素，不会发生重叠） clear属性 clear属性让自身不能和前面的浮动元素相邻。...BFC BFC定义通过一些特定的手段形成的封闭空间，即BFC元素内部不会影响外部的元素。可以用来防止margin重叠，清楚浮动防止父元素高度坍塌。...锚点定位行为的触发条件 URL地址中的锚链与锚点元素对应（a标签以及name属性）并有交互行为可focus的锚点元素处于focus状态锚点定位的本质通过改变容器滚动高度或者宽度实现的。...绝对定位绝对定位特性块状化破坏性块状格式上下文包裹性、自适应性 absolute的包含块根元素被称为“初始包含块”，其尺寸等同于浏览器可是窗口的大小。...absolute与text-align text-align会改变absolute元素的位置，本质是“幽灵空白节点”和“无依赖绝对定位”共同作用的结果，具体就是由于绝对定位元素不占据CSS流中的尺寸空间

7933 0

HTML 基础

在 HTML 中，用于描述功能的符号称之为 "标记"，标记在书写时，必须用尖括号括起来() (1). 封闭类型标记 ①. 封闭类型标记必须成对出现 ②....URL 的三种表示方式： (1). 绝对路径，从资源文件所在的最高级目录下开始的完整路径 ①...._self 默认值，在自身标签页中，打开新网页 ②. _blank 在新标签页中，打开新网页 (3). name 定义页面锚点 (4). 链接的表现形式 ①....锚点(Anchor)，在 html 文档的某行位置处做一个记号，允许通过超链接跳转到该记号位置处 (1). 定义锚点(做记号) ①....通过 a 标记的 name 属性，内容 ②. 通过任意标记的 id 属性， (2). 链接到锚点(跳转到锚点处) ①.

4.2K1 0

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

12个HTML和CSS必须知道的重点难点问题这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？...这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中?...注意 relative 移动后的元素在原来的位置仍占据空间。 **absolute:绝对定位。...不会触发其点击事件 visibility:hidden 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。...src与href的区别 href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

2.3K2 0

position-try-fallbacks

: --my-anchor; position-area: top; position-try-fallbacks: bottom; } 我写下代码： /* 定义一个锚点元素...*/ .anchor { anchor-name: --my-anchor; /* 使用自定义的锚点名称 */ height: 80px; /* 高度设为80px...*/ position-anchor: --my-anchor; /* 使用自定义的锚点定位 */ position-area: top; /* 默认在顶部对齐 */...> /* 定义一个锚点元素 */ .anchor { anchor-name: --my-anchor; /* 使用自定义的锚点名称 */ height...position: absolute; /* 绝对定位 */ position-anchor: --my-anchor; /* 使用自定义的锚点定位 */ position-area

961 0

CSS深入理解学习笔记之overflow

滚动条的宽度机制：　　　　滚动条会占用容器的可用宽度或高度。 ?...原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在就对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素，没有则是body...6、overflow与锚点技术　　（1）锚链和锚点　　　　锚链：就是我们url中常见的“#XXXX”。　　　　锚点：就是标签的ID。　　　　锚点定位：通过锚链定位锚点位置。　　...（2）锚点定位的本质　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。　　　　前提：①容器可滚动；②锚点元素在容器内。　　...（3）锚点定位的触发　　　　①url地址中的锚链与锚点元素；　　　　②可focus的锚点元素处于focus状态；　　（4）锚点定位的作用　　　　①快速定位　　　　②选项卡技术　　　　③单页应用

4.2K5 0

超强的 Anchor Positioning 锚点定位

本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为锚点定位。...Anchor Positioning（锚点定位）允许我们基于其它锚点元素的位置和尺寸去定位上下文，而不是传统意义上的基于父元素去进行绝对定位。...其重点总结如下：首先，锚点定位，需要我们通过新的锚点名称（anchor-name）来标记元素，允许我们使用这些经过了标记的元素作为我们绝对定位的基准目标；其次，我们可以在绝对定位的元素上，通过新的语法...的锚点元素进行定位。...Anchor Positioning（锚点定位）允许我们基于其它锚点元素的位置和尺寸去定位上下文，而不是传统意义上的基于父元素去进行绝对定位。

4403 0

body标签中相关标签

CSS课程中你将知道，这两个东西，都是最最重要的“盒子” div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。 div标签的属性： align="属性值"：设置块儿的位置。...属性值可选择：left、right、 center 和div>唯一的区别在于：是不换行的，而div>是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。...div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。...首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字示例：的#号不要忘记了，表示跳到名为top的特定位置如果我们将上面代码中的第二个a标签写成： <!

4.6K1 0

脱离文档流分析（转）

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。只有绝对定位absolute和浮动float才会脱离文档流。 ...相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...（这里的占据文档流指的是占据原来的位置，而不是占据相对定位后的位置。...总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。 ...绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层

1.3K2 0

CSS-定位(position)

如下图所示，即是一个相对定位的效果展示：注意：相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。...绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。 # 父级没有定位若所有父元素都没有定位，以浏览器为准对齐(document文档)。...因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是相对定位. 这就是子绝父相的由来。 son3div> div> 结果 # 定位的扩展 # 绝对定位的盒子水平/垂直居中普通的盒子是左右margin 改为 auto...定位的盒子也可以水平或者垂直居中，有一个算法。首先left 50%,top50%父盒子的一半大小。然后外边距退回自己宽度及高度的一半值就可以了。

1.5K1 0

CSS补充

文档流（定位流，普通流，浮动流） 1、普通流定位 static（默认方式）普通流定位，又称为文档流定位，是页面元素的默认定位方式页面中的块级元素：按照从上到下的方式逐个排列页面中的行内元素：按照从左到右的方式逐个排列...语法属性：position 取值：relative 配合着偏移属性(top/right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征...1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定...语法属性：position 取值：fixed 配合着偏移属性(top/right/bottom/left)实现位置的固定高度塌陷问题在文档流中，父元素的大小会被子元素撑开。...通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。当元素出发BFC后会具有如下特点：开启BFC后，元素不会被浮动元素覆盖。

6171 0

前端基础篇之CSS世界

绝对定位`position: absolute` 定义和浮动元素一样，绝对定位也具有块状化、BFC、包裹性、脱离文档流、没有margin合并的特性。但和浮动不同的是，绝对定位是完全的脱离文档流。...无依赖绝对定位大多数用到绝对定位的时候，都是存在包含块和left/top等方向属性的。...绝对定位和overflow: hidden 其实一句话就可以表示两者之间的关系：当overflow: hidden元素在绝对定位元素和其包含块之间的时候，绝对定位元素不会被剪裁。...以下两种绝对定位元素不会被剪裁: div style="overflow: hidden;"> div> position: absolute的流体特性当绝对定位元素的水平方向(left/right)或垂直方向(top/bottom)的两个定位属性同时存在的时候，绝对元素在该方向上便具有了流体特性

2.1K5 0

CSS笔记(14)

原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它.(不脱标,继续保留原来位置) 3.绝对定位绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的....如果祖先元素有定位(相对/绝对/固定),则以最近一级的有定位祖先元素为参考点移动位置. 绝对定位会脱标,不会保留原来的位置....子绝父相: 子级使用绝对定位,父级使用相对定位子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他的兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来的位置....定位拓展: 绝对定位和固定定位也和浮动类似. 行内元素添加绝对或固定定位,可以直接设置高度和宽度....块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小(不加定位的话宽度是父级元素的宽度). 浮动元素,绝对定位(固定定位)元素的都不会触发外边距合并的问题.

5961 0

2020 年「我与技术面试那些事儿」

7.锚点的使用方式： id="" name="" dadaqianduan 8.结构标签：用于定义文档的页眉用于定义页面的导航链接部分... 超级链接用于创建普通超级链接，下载链接，电子邮件链接，联系我们链接，空链接，锚点跳转...：relative表示相对定位，相对于自己本身所在正常文档流中的位置进行定位；absolute表示为绝对定位，相对于最近一级定位，相对于static的父元素进行定位；fixed用于生成绝对定位，相对于浏览器窗口或...对于float可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素，即遮盖现象。...15.css中，自适应的单位百分比%，相对于视口宽度的单位vw，相对于视口高度的单位vh，相对于视口宽度或者高度的单位vm。相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。

1.3K2 0

【云+社区年度征文】全年的技术盘点与总结（含小程序开发）

7.锚点的使用方式： id="" name="" dadaqianduan 8.结构标签：用于定义文档的页眉用于定义页面的导航链接部分... 超级链接用于创建普通超级链接，下载链接，电子邮件链接，联系我们链接，空链接，锚点跳转...：relative表示相对定位，相对于自己本身所在正常文档流中的位置进行定位；absolute表示为绝对定位，相对于最近一级定位，相对于static的父元素进行定位；fixed用于生成绝对定位，相对于浏览器窗口或...对于float可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素，即遮盖现象。...15.css中，自适应的单位百分比%，相对于视口宽度的单位vw，相对于视口高度的单位vh，相对于视口宽度或者高度的单位vm。相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。

1.7K34 1

CSS学习笔记（基础篇）

清除浮动问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。清除浮动不是不用浮动，清除浮动产生的问题。...特点： 1.元素使用绝对定位之后不占据原来的位置（脱标） 2.元素使用绝对定位，位置是从浏览器出发。 3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。...4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。 5.给行内元素使用绝对定位之后，转换为行内块。...2.不脱标，其他的元素不能占有其原来的位置。 3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。 4.行内元素使用相对定位不能转行内块元素。...固定定位 position:fixed; 特点： 1.固定定位之后，不占据原来的位置（脱标） 2.元素使用固定定位之后，位置从浏览器出发。

4.6K3 0

css应知应会第四集

但有可能会被卡住 4、文本，图像，行内元素和行内块元素时采用环绕的方式来排列的，是不会被其它的浮动元素压在底下的 2、清除浮动元素一旦浮动起来之后，就会对后续元素的位置带来一定的影响...父元素的高度是以未浮动的子元素为准的 1、直接设置父元素的高度弊端：必须要知道父元素的高度是多少 2、设置父元素也跟着浮动...面试：解释 display:none 与 visibility:hidden 的区别 display:none 会脱离文档流，所以它不会占据页面空间...属性:position 取值:relative 配合偏移属性实现位置的微调 3、定位 - 绝对定位 1、什么是绝对定位 & 特点...将元素设置为绝对定位的话将具备以下特征 1、绝对定位的元素会脱离文档流-不占据页面空间 2、绝对定位的元素会相对于离他最近的，已定位的

1.2K3 0

CSS定位

移动的出发点是自身标准流的位置 2. 相对定位移动的元素不会对别的元素产生干扰，“没有脱标”，真正占得位置还是标准流的位置（肉体不在灵魂永驻） 3. 可以盖在标准流的上方 4....一般用于微调元素和配合绝对定位来实现效果绝对定位 position:absolute; 特性： 1.移动的出发点：从绝对元素开始一直往上级找（直到找到最大的html标签），在这个过程中，...只要有一个元素（A元素）是定位（相对，绝对，固定）的任何一个，这个绝对定位的元素就会参照这个A元素进行定位，并且不会在往上找了，如果一个都没有，最终会以html元素定位 2.脱标 1.1....:-自身宽度的一半; margin-top:-自身高度的一半; 使用方式：在工作中，绝对定位"大多"配合相对定位一起使用（父相子绝）父相：在标准流上占有位置子绝：针对这个标准流在去移动...移动位置基准静态static 不脱标正常模式不可以正常模式相对定位relative 不脱标占有位置可以相对自身位置移动绝对定位absolute 完全脱标，不占有位置可以相对于定位的父级移动位置

1K4 0

42个来自《 CSS世界》中的实用技巧

，其他都是动态的；使用点的目的是语义化和低版本浏览器的兼容。正在加载中... 高度不能是确定值，缺点是如果在内部使用锚点定位会出现问题。...可以通过锚点，focus，scrollTop滚动。...28、通过标签实现的选项卡效果与锚点不同的是不会触发由内到外（多层滚动造成的某种事件冒泡的效果）的页面跳动（元素上边与分段上边对齐），还支持Tab选项的效果；缺点是需要js支持效果。高度放置0和overflow隐藏目的是为了不影响主体的体验，而之所以绝对定位元素没有被隐藏的原因是“如果overflow不是定位元素，同时绝对定位元素和overflow容器同时也没有定位元素，则溢出无法对绝对定位元素进行剪裁

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭