/codepen.io/cellinlab/pen/ExQdOor # 绝对定位 .position-absolute { position: absolute; background: yellow...（即绝对定位元素应该位于从“包含元素”的顶部 30px，从左边 30px。） # 定位上下文 哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的 position 属性。...如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在初始块容器中。...这个初始块容器有着和浏览器视口一样的尺寸，并且 元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在 元素的外面，并且根据浏览器视口来定位。...绝对定位元素在 HTML 源代码中，是被放在 中的，但是在最终的布局里面，它离页面 (而不是 ) 的左边界、上边界有 30px 的距离。
当我在包装元素中添加更多元素时，它就能开始正常工作了。 这是为什么？ 这是因为当一个元素被赋予 position: sticky 样式时，粘性项目的容器是它可以粘贴的唯一区域。...粘性容器 —— 是包装粘性元素的 HTML 元素。 这是粘性元素可以浮动的最大区域。 当你定义一个具有 position:sticky 样式的元素时，父元素会被自动定义为粘性容器！...容器是粘性元素的范围，并且该元素无法离开其所在的粘性容器。 这就是为什么在前面的例子中，粘性元素没有被粘住的原因：这个粘性元素是粘性容器中唯一的子元素。 CSS 粘性定位的示意图： ?...我来解释一下： 相对（或静态）—— 粘性定位元素类似于相对和静态位置，因为它保留了 DOM 中的自然间隙（留在流中）。...绝对 —— 在粘贴区域的末尾，元素会停止，并堆叠在另一个元素的顶部，就像一个绝对定位的元素被放在一个 position: relative 容器内的行为。 粘在底部？
# CSS-定位(position) 为什么要用定位？...元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 父级没有定位 父级有定位 子绝父相 定位的扩展 绝对定位的盒子水平/垂直居中 固定定位...1.定位模式(定位的分类) 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下： 选择器{ position:属性值; } position属性的常用值 值 描述 static...所谓静态位置就是各个元素在HTML文档流中默认的位置。 在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。...absolute (拼爹型) 当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
; 由于 子元素 需要使用 绝对定位 , 此处的 父容器 必须设置 相对定位 ; 上图中 , 父容器存在 1 像素的边框 , 父容器 中设置一个内边距 ; 设置子元素浮动后 , 浮动的元素 可以覆盖到...相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中 , 可以使用绝对定位在父容器的任意位置显示任何元素 ;.../* 绝对定位元素 - 左上角 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器左上角 */...; /* 绝对定位元素 - 右下角 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角...- 右下角 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /*
position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。...值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。...，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。...border: 1px solid green; position: absolute; right: 0; } // div在html中必须放在left和right之后 .child_center
这篇我们来讲讲CSS定位。 一、Position(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。...Static 定位（默认效果） HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到top, bottom, left, right影响。 2....相对定位元素经常被用来作为绝对定位元素的容器块。 4....Absolute 定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: h2{ position:absolute; left...具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
和position:absolute样式； 内部溢出的元素是通过position:absolute绝对定位； 如果你只关心结论，那么记住这两点就够了。...而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。 理论依据 那么，这个原理到底是什么呢？...而html元素，即使指定了宽高和position:relative，也只影响绝对定位后代元素的定位，而不能裁剪溢出元素。）...翻译： 一个绝对定位的后代块元素，部分位于容器之外。...回到我的demo，overflow的元素位于相对定位的元素与绝对定位元素之间，因此根据规定它不能剪裁绝对定位的子元素。也就是说爷爷相对定位，老爸规定溢出隐藏，可是儿子是绝对定位元素。
定位(position) 目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1....值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 ?...子绝父相 —— 子级是绝对定位，父级要用相对定位。 子绝父相是使用绝对定位的口诀，要牢牢记住！ 疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？...定位(position)的扩展 5.1 绝对定位的盒子居中 注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。...不能 基本单独使用 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，
static 和 relative 保留其在文档流中的自然空间，而 absolute 和 fixed 则不保留空间，它们具有浮动行为。而新的sticky定位具有所有类型的相似性。...为什么？ 这样做的原因是，当一个元素被赋予sticky定位样式时，粘性元素的容器是粘性元素可以粘住的唯一区域。...当你使用 position: sticky 定义一个元素时，自动定义了父元素为粘性容器！ 记住这一点非常重要！容器是粘性项目的作用域，项目无法离开其粘性容器。...让我来解释一下： Relative 定位（或Static定位）- 粘性定位元素类似于相对定位和静态定位，因为它保持DOM中的自然间隙（保持在流中）。...Absolute 定位 - 在粘附区域的末尾，元素停止并堆叠在另一个元素的顶部，就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部？
浮动的元素会从正常文档流中取出来(即浮动元素的父容器不再包含该浮动元素)，然后始终与其父容器的左侧或右侧对齐。也会尽可能的在父容器内向上浮动。...: 在两侧都不能出现浮动元素，处于两侧所有浮动元素的最下方 none: 不清除浮动 容纳浮动元素 我们知道，浮动元素已经从正常文档流中移除，父容器已经不包含浮动元素了，可能会造成一些布局问题，这时可能需要父容器仍然容纳浮动元素...设置父容器的 overflow: hidden 属性，可以使父容器仍然容纳浮动元素，如下图所示。 2. 让父元素也浮动。(这种做法需要额外设置父容器宽度) 3....(坍塌只针对于父容器的第一个子元素) 定位 虽然之后我们会谈论 Flexbox 和 Grid，但我们仍需要讨论下 position 属性。他是古老布局的基础。...如果绝对定位(position 属性的值为 absolute)的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
: auto; 样式的方式 令盒子水平居中 ; 举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点...的容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素...: -40px 向左移动 40 像素 ; /* 绝对定位元素 - 水平居中 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute...- 水平居中 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器左上角 */ /* 上边偏移...- 垂直居中 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /
BFC原理（块级格式化上下文） 含义：是页面中的一块独立渲染区域，并有一套渲染规则。它决定了其子元素如何定位，以及其它元素的关系和相互作用。...、table-cell等 BFC作用 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。...自适应布局 两栏布局 左边左浮动，右边margin-left（float+margin） 左元素float:left 右边父元素BFC（float+BFC） 左元素绝对定位，left:0...绝对定位(子绝父相) 这里是父容器 这里是子容器 .father {...子元素未知：display：flex；justify-content: center；align-items: center 子元素用绝对定位，上下左右为0，margin：auto，父：relative
为了达到自适应布局，我们不能假设父级容器宽度固定，也不能假设蓝色按钮的文案固定，所以链接元素的位置也是根据上下文环境改变的。...绝对定位结合margin实现垂直居中 很多设计都可以抽象为“一个元素相对于父级（或包含块）在垂直方向或水平方向上居中对齐”的模式，根据实际情况又可分为该元素的尺寸未知和已知两种情况。...run-in不能插入本身为run-in的块中，也不能插入块中已有run-in的块中。 否则，run-in框变为块框。 浏览器支持：IE8+（chrome不支持，难道是太鸡肋？）...9.6 Absolute positioning 从常规流中完全抽离，对其后继兄弟元素无影响。 固定定位是绝对定位的特例，它的包含块是viewport。...） 静态位置（static position），粗略地讲是指一个元素在常规流中的位置。
元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 注意： 绝对定位的元素忽略float属性！ 为什么要清除浮动？...页面的元素定位机制分为：普通文档流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。 ...（2） 当position:absolute;与position:fixed;时，元素脱离普通文档流，不再占据位置，类似一个漂浮层。absolute定位是相对于自己最近的“祖先元素”定位。...Fixed定位是相对于浏览器窗口进行定位的。 Absolute示例： ? 1.2.弹性布局flex 弹性布局不会脱离普通文档流，也不会改变当前元素的定位，它是一个自适应的伸缩容器。...样式应该用最外层容器包裹，避免样式的冲突。注：最外层容器千万不能以.content式命名，应如.emial-w表式邮箱外层。 7.样式的嵌套建议不超过5层。
只在滚动到指定位置才出现 点击按钮，即可立刻回到页面顶部，并且按钮消失 本节使用的 nicegui 版本为 1.4.21 绝对定位 专栏惯例：先说原理细节，再给出一个封装好的便捷方法。...比如，把数字图案放在右下角： 行8： .style("position: relative") ,设置容器为相对定位 行11： position: absolute ，设置圆形图标为绝对定位。...然后就可以通过各种位置属性指定在容器中的边缘位置。...同理也有 translateY 总结一下： 设置父容器 为相对位置。 position: relative 设置目标元素绝对位置。 position: absolute 设置目标元素位置距离值。...top , right , bottom , left ，可以用百分比，参照物是父容器的宽高 设置目标元素的偏移。
绝对定位 5.1 概述&入门案例 5.2 进阶案例 1：父子关系中的绝对定位 5.3 进阶案例 2：子绝父相 5.4 总结 6. ...作用：更加方便进行元素的位置调节 根据用法、特性的不同，定位分为多种模式 常见定位模式： static 静态定位 relative 相对定位 absolute 绝对定位...4.4 注意事项&总结 1 、 标准流 (position:static;) 和 浮动 不能设置边偏移 2 、相对定位的边偏移，是 相对于 元素原先在标准流中的位置 来定位的。...注意：绝对定位元素，将 不占用标准流 位置 语法： 选择器 { position : absolute ; } 准备代码：（将为绿色 div 设置绝对定位）...、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始 5.2.5 进阶小结 父子关系中，绝对定位子元素 的边偏移起始位置为： 最近的 定位父元素的 左上角 5.3 进阶案例 2：子绝父相 为保持父元素在原有文档流定位
CSS中的定位详解及扩展 定位分类 静态定位（static） 相对定位（relative） 绝对定位（absolute） 固定定位（fixed） 粘性定位（sticky） 定位的叠放次序（z-index...） 定位拓展 一、静态定位（static） 语法： 选择器 { position: static; } 含义：静态定位按照标准流的特性摆放位置，没有列偏移（top,bottom,left,right...三、绝对定位（absolute） 语法： 选择器 { position: absolute; } 含义：采用绝对定位的元素在移动位置的时候是以父元素为参照物的,但是这个父元素必须满足一定的条件才能成为绝对定位元素眼里的父元素...如果父元素有定位（相对定位、绝对定位、固定定位，但不能是静态定位）则它会以最近一级的有定位的父元素作为参照元素移动位置。...七、定位拓展： 绝对定位的盒子居中： 加了绝对定位的盒子不能通过margin: 0 auto; 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
静态定位： 静态定位是默认值，就是之前认识的标准流。 代码：postion:static 静态定位不能通过方向偏移值来改变。 相对定位： 自恋型定位，相对于自己之前的位置进行移动。...代码：postion:relative 需要配合访问属性来移动 相对于自己原来的位置进行移动 在页面中占位置→没有脱标 应用场景 ：配合绝对定位组cp（子绝父相），用于小范围的移动。...绝对定位： 拼爹型定位，相对于非静态定位的父元素进行移动。...代码：position:absolute 需要配合方位属性实现移动 默认相对于浏览器可视区域进行移动 在页面中不占位置→已经脱标 应用场景 ：配合相对定位组CP（子绝父相） 绝对定位相对于谁移动？...代码：position:fixed 子绝父相 含义： 子元素用绝对定位，父元素用相对定位。 应用场景： 让子元素相对于父元素进行自由移动。 好处： 父元素是相对定位，对网页布局影响最小。
Bootstrap框架中的网格系统就是将容器平分成12份。 你用过媒体查询，或针对移动端的布局/CSS 吗？...static 静态定位 静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。...absolute 绝对定位 绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览器窗口。...请注意，区别于相对定位的还有一点，绝对定位脱离常规文档流！ ? fixed 固定定位 固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。
1.设置定位： 静态定位：static 相对定位：relative 绝对定位：absolute 固定定位：fixed 2.设置偏移量：水平+垂直就近各取一个 ---- 静态定位 position...(后来者居上；div1添加z-index: 1;会让第一个块盖住第二个块) ---- 绝对定位 position:absolute; 需要找父级(子绝对定位，父相对定位。...变成了行内块 注意： 绝对定位后的盒子不能使用margin: 0 auto;进行居中；但可以用如下方法： position: absolute;//绝对定位 /*水平居中*/ left: 50%;...，如宽 401px，像素不能设置成小数，所以可以用下面方法： position: absolute;//绝对定位 left: 50%; top: 50%; /*位移：自己宽度高度的一半*/ transform...: absolute;/*绝对定位，相对于浏览器*/ /*下面三行是设置绝对定位的居中*/ top: 50%; left: 50%
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
