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

【CSS】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )

一、子元素绝对定位 父元素相对定位 ---- 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用 相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置..., 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性...; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素 需要 任意摆放 , 必须使用绝对定位 ; 二、代码示例 ---- 父元素使用相对定位 , 子元素使用绝对定位 ; 两个子元素分别放置在 左侧和右侧...DOCTYPE html> 绝对定位示例 /* 父元素设置相对布局...: 40px; height: 40px; background-color: blue; } /* 子元素设置绝对布局 */ .son2 { /* 绝对布局 */

2.5K20

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

】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 ) 【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 【CSS】固定定位 ( 固定定位概念语法 | 固定定位...父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申...相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素...的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ; 绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ; 这里与相对定位进行对比 , 相对定位...如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素

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

    【CSS】使用绝对定位 浮动解决外边距塌陷问题 ( 为父容器 子元素设置内边距 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

    / 子元素设置内边距 / 边框 ---- 这里使用传统方法 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 为父容器设置 1 像素的 内边距 ; .father { width...: 400px; height: 400px; background-color: pink; /* 为父容器 / 子元素设置内边距 / 边框 */ padding: 1px;... 执行结果 : 四、使用绝对定位解决外边距塌陷...- 为子元素设置绝对定位 ---- 为子元素设置绝对定位 , 可以解决 外边距 塌陷问题 ; 代码示例 : 元素设置内边距 / 边框 */ /*padding: 1px;*/ } .son { /* 为子元素设置绝对定位 解决外边距塌陷问题 */ /* 注意 : 为子元素设置相对定位

    1.8K20

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

    一、绝对定位 ---- 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位..., 使用的就是 相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ; 二、标准流下的父容器与子元素关系 ---- 1、标准流下父容器与子容器代码 标准流 父容器 中 包含一个...> 展示效果 : 三、子元素设置绝对定位与父容器是否有定位的效果对比...---- 在上面代码的基础上 , 为 子元素 添加绝对定位 数据 , 分别设置 顶部 和 左侧 50 像素的偏移量 ; /* 绝对定位 */ position: absolute;.../* 顶部偏移量 50 像素 */ top: 50px; /* 左侧偏移量 50 像素 */ left: 50px; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位

    1.1K20

    【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

    ; 由于 子元素 需要使用 绝对定位 , 此处的 父容器 必须设置 相对定位 ; 上图中 , 父容器存在 1 像素的边框 , 父容器 中设置一个内边距 ; 设置子元素浮动后 , 浮动的元素 可以覆盖到...内边距 范围 ; /* 最外层 父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸...其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中 , 可以使用绝对定位在父容器的任意位置显示任何元素 ; /* 绝对定位元素 - 左上角 */ ....; /* 绝对定位元素 - 右下角 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角...height: 200px; background-color: purple; } /* 绝对定位元素 - 左上角 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位

    1.7K10

    【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

    的容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素...: -40px 向左移动 40 像素 ; /* 绝对定位元素 - 水平居中 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute...top: 50%; , 然后再向上移动 40 像素 ; /* 绝对定位元素 - 垂直居中 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position...height: 200px; background-color: purple; } /* 绝对定位元素 - 水平居中 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位...- 垂直居中 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /

    4.4K40

    前端面试实录CSS篇（最近一周）

    同一个父级元素下的元素层叠效果是受父级影响的，就是说如果你的父级z-index很小，那你子级设置再大也没有用 19. 常见的 css 布局单位？...，将父级元素设置为相对定位。...，将父级元素设置为相对定位。...父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边...• absolute: 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 • relative: 相对定位元素的定位是相对其正常位置 • fixed: 元素的位置相对于浏览器窗口是固定位置

    35410

    每天10个前端小知识 【Day 18】

    普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略 white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow...核心的css代码结构如下： position: relative：为伪元素绝对定位 overflow: hidden：文本溢出限定的宽度就隐藏内容） position: absolute：给省略号绝对定位...绝对定位(Absolute positioning) 如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。...在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...）重叠 父子元素的外边距重叠 清除浮动解决令父元素高度坍塌的问题 7.为何CSS不支持父选择器？

    53610

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

    ：relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流...浮动元素依然位于父元素之内 4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 注意 1、一行内，显示不下所有的已浮动元素时，最后一个将换行 2、元素一旦浮动起来之后，那么宽度将变成自适应...方案2 在父元素中，追加空子元素，并设置其clear属性为both clear是css中专用于清除浮动的属性 作用：清除当前元素前面的元素浮动所带来的影响 取值： 1、none 默认值...方案4 为父元素设置overflow属性 取值：hidden 或 auto 优势：简单，代码量少 弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏 方案5 父元素设置display:table...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？

    1.7K60

    CSS(五)

    (五) 發佈於 2018-07-02 从这一篇开始，将要介绍 CSS 中最重要的两个知识 - 浮动和定位。...，页面元素的流方式: 块级元素从上流到下 行内元素从左上流到右下 浮动允许您将块级元素并排放置而不是彼此叠加。...也就是说，不会再按照默认文档流来布局元素了。浮动的元素会从正常文档流中取出来(即浮动元素的父容器不再包含该浮动元素)，然后始终与其父容器的左侧或右侧对齐。也会尽可能的在父容器内向上浮动。...: 如父容器设置了 height 属性，而子元素超出父容器高度，使用 overflow: hidden 可以隐藏溢出部分 清除浮动: 使用 overflow: hidden 使得父容器仍然包含浮动子元素...如果绝对定位(position 属性的值为 absolute)的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

    1.2K20

    【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

    absolute 绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。...绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的，另外，绝对定位的元素会自动忽略有定位属性的祖先元素的 padding 属性。...fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口，它会脱离标准文档流，并且浏览器把他们一致视作块级元素。...行框的宽度是由包含块和与其中的浮动来决定； IFC 中的行框一般左右边贴紧其包含块，但 float 元素会优先排列； IFC 中的行框高度由 CSS 行高计算规则来确定，同个 IFC 下的多个行框高度可能会不同...如果子元素未设置强制换行的情况下，行框将不可被分割，将会溢出父元素。

    1.9K30

    知识整理之CSS篇

    此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。 盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠（触发BFC）。...BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。...示意图： image.png 外边距重叠的意义 外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。 外边距重叠解决方案 1....这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。...em em，是相对长度单位，em是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 优缺点：em的值并不是固定的，它会继承父级元素的字体大小。

    2K20

    CSS中各种布局的背后(*FC)

    影响布局的因素： 1.盒的尺寸和类型 2.定位方案 Positioning Scheme （常规流，浮动和绝对定位） 3.文档树中元素之间的关系 4.外部信息（如：视口大小，图片的固有尺寸等） FC -...描述元素跟它的父元素与兄弟元素之间的表现。...定位方案(Positioning schemes) - 常规流(Normal flow) CSS2.1中，常规流包括块级盒的块格式化，行内盒的行内格式化，以及块级盒和行内级盒的相对定位。...- 绝对定位(Absolute positioning) 在绝对定位模型中，盒完全从常规流中脱离（对后面的同胞元素无影响）并根据包含块来分配位置。...BFC -- Block Formatting Context 触发条件 根元素或其它包含它的元素 浮动 float: left/right/inherit 绝对定位元素 position: absolute

    2.5K50

    理解CSS布局和块格式化上下文

    [image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。...什么情况下会创建BFC 根元素或包含根元素的元素 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display...[image] 但事实上，float中的文字已经脱离文档，如果文档流文字过少，浮动元素就会溢出父元素边缘。....outer { overflow: auto; } [enter image description here] BFC防止垂直外边距重叠 外边距折叠的规则是：当两个块级元素相邻并且在同一个块级格式化上下文时

    2.3K30

    【愚公系列】2023年03月 其他-Web前端基础面试题（CSS_42道）

    元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。...absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。...19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。...参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。 20、对line-height是如何理解的？ 行高是指一行文字的高度，具体说是两行文字间基线的距离。...否则，如果float不是none，框是浮动的，display根据下表进行调整 否则，如果元素是根元素，display根据下表进行调整 其他情况下display的值为指定值 总结起来：绝对定位、浮动

    3.7K20

    【CSS3】css开篇基础（4）

    浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 浮动的元素会具有行内块元素的特性 任何元素都可以浮动。...浮动元素经常和标准流父级搭配使用 为了约束浮动元素位置，我们网页布局一般采取的策略是： 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。...符合网页布局第一准侧 4.定位 在网页设计中，定位（Positioning）是一种CSS属性，用于控制元素在页面中的位置。...绝对定位 绝对定位不会保留原来的位置（脱离文档流），那后面盒子就会往上占了它的位置； 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位； 如果祖先元素有定位（可以是相对、绝对或者固定定位...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。

    52310

    名人堂 | CSS3 transform对普通元素的N多渲染影响

    1transform提升元素的垂直地位 我们可能都知道这样一个规则，当遭遇元素margin负值重叠的时候，如果没有static以外的position属性值的话，后面的元素是会覆盖前面的元素的。...transform覆盖后面的重叠元素Demo 只要是支持transform元素的浏览器，包括IE9(-ms-), 都会提高普通元素的垂直地位，使其覆盖其他元素而不是被覆盖。...3transform改变overflow对absolute元素的限制 在以前，overflow与absolute之间的限制规范内容大致是这样的： absolute绝对定位元素，如果含有overflow不为...visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。...您可以狠狠地点击这里：transform与absolute宽度100%限制Demo 结果，无论是IE9+，还是Chrome还是FireFox浏览器，所有绝对定位图片100%宽度，都是相对设置了transform

    88110
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券