文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制z-index层级 限制描述： 父元素没有relative的时候，绝对定位元素的z-index值越大，则层级越高。...但是如果两个绝对定位元素的父元素都有relative控制，则绝对定位元素自身的层级再高也没用，还是受其父元素的限制。只有带着relative的父元素的层级越高，绝对定位元素的层级才越高。...（这是一个bug） 限制absolute超越overflow的现象 限制描述： absolute又一个特性，就是设置absolute的元素，如果不设置方位值，父元素也不设置relative，那么父元素的...当然，如果父元素设置了relative和overflow，那么即使子元素设置了absolue，他也会超出父元素被隐藏。...，只是在原有位置腾空而起，不会发生位移，根本没必要设置父元素的相对定位。

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

    让CSS官方后悔的一些决定

    important是「不important」的意思，这与该语法实际想表达的意思完全相反。 所以，工作组认为!important是个糟糕的语法。...z-index语法 z-index属性用于设置定位元素及其后代元素或flex元素的Z轴层叠顺序，z-index较大的元素会叠在较小元素的上面。...所以，为啥不直接让rgb与hsl能够接收第四个参数（alpha值）呢？工作组很费解 自己当初咋想的。...工作组认为，当「替换元素」被绝对定位时，偏移属性不应该改变元素的位置，而应该改变尺寸。...比如，当对绝对定位的img设置left: 20px; right: 20px;，那么他应该被拉伸到「从左侧20px到右侧20px」的长度，而不是移动到距离左侧20px的位置。

    16020

    前端学习(14)~css学习(八)：定位属性

    -- 固定定位 --> 相对定位 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。...无论页面如何滚动，这个盒子显示的位置不变。 备注：IE6不兼容。 用途1：网页右下角的“返回到顶部” 比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。...*/ /*不希望我们的页面被nav挡住*/ padding-top: 60px; /*IE6不兼容固定定位，所以这个padding...（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。 （5）从父现象：父亲怂了，儿子再牛逼也没用。...意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。 第五条分析： ? z-index属性的应用还是很广泛的。

    92820

    问题总结

    在此记录遇到的问题和理解，希望能在日后的应用学习和工作中更加透彻的理解。...关于CSS中position定位： 开始学习的时候简单粗暴的总结了 absolute; 绝对定位（相对于浏览器边界），拉动滚动条，位置随之改变。...relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。...选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。    ...注： CSS中定位的层叠分级：z-index: auto | namber; 总结： absolute; 绝对定位（相对于浏览器边界） 选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性

    63250

    面试官：CSS 面试题集锦

    z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 该属性设置一个定位元素沿着 z 轴的位置，z 轴定义为垂直延申到显示区的轴，如果为正数，则离用户更加近...块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。...absolute 绝对定位 绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览器窗口。...3.相对大小的字体,字体也不能使用绝对大小（px），只能使用相对大小（em）或者高清方案（rem），rem不局限字体大小，而前面的width也可以使用，代替百分百。...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时，元素依然会占据其原始空间 而改变绝对定位会触发重新布局，进而触发重绘和复合。 改变绝对定位会使用到 CPU。

    3.3K30

    HTML定位简介

    2.可以在任意一个位置的元素（绝对定位） 如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地...在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。 　　...绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。 　　...(3)总结两种定位的特征 　　绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积(父级)有关。...(4)对特殊情况的补充 　　在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个 对象一开始就是背靠着最外边墙的，此时再用一个负值定位它

    1.8K20

    DOM元素定位

    属性来完成 在一般情况下我们DOM元素的默认position的值为 static 除此之外position还拥有 relative(相对定位) absolute(绝对定位) fixed(固定定位) sticky...(粘性定位) 相对定位 relative 相对定位即可控制DOM相对于自己原来位置进行定位 可通过如 left: 50px 如此来调节 绝对位置 absolute absolute的特性是不会为此元素预留空间...absolute的定位是以相对于元素最近的非static定位祖先元素的偏移来确定元素位置。...可以利用如 right:50px 等来调节位置 粘性定位 sticky 这个简单说就是当页面下拉到DOM元素到达了设定的位置，DOM元素将不会再随下拉移动，效果如页面内图片 顺便一提，如前面所说，网页存在类似图层一说...，具体图层的上下关系往往通过 z-index 来表示 z-index 越大元素越在上层

    99230

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

    | 代码示例 ) 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 ) 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序...: absolute 固定定位 : fixed 5、静态定位 CSS 中的 静态定位 是 默认的定位方式 , 就是无定位 , 设置该定位方式 , 定位盒子不生效 ; 为盒子模型 设置 静态定位 模式...需要 任意摆放 , 必须使用绝对定位 ; 9、固定定位概念语法 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用...属性值简介 使用 z-index 属性 , 可以设置 堆叠层级 , 数值越大 , 越靠上 ; z-index 属性取值范围 : 负整数 / 正整数 / 0 ; z-index 属性默认值为 0 ; z-index...属性值相同 , 那么按照先后顺序 , 后来的覆盖之前的 ; z-index 属性值的数字后面没有单位 ; z-index 属性 生效的情况 : 相对定位 绝对定位 固定定位 在其它情况 , 如 : 静态定位

    36010

    浮动清楚浮动及position的用法

    relative（相对定位） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

    2.1K40

    CSS布局

    绝对定位 相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。...绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。 如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。...因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。...固定定位 fixed属性了，应用fixed也叫固定定位，固定定位是绝对定位的中，固定定位的元素也不包含在普通文档流中。...> 可以看出浮动后虽然黄色div布局不受浮动影响，正常布局，但是文字部分却被挤到了紫色浮动div下边。

    1.1K20

    css 定位

    一、相对定位 position: relative 相对默认的布局位置进行定位，也就是相对自己应该在的位置来定位。...绝对定位元素也看不见绝对定位元素。所以下图2个box2发生了重叠 ? 绝对定位的定位对象是从它的父元素找是否有relative/fix/absolute。...三、z-index z-index详细介绍 1、z-index 定义： 属性设置元素的堆叠顺序，该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。...（3）、父子关系的z-index 如何设置，不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index，然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。...因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。 比如说浏览器右边 回到顶部的按钮就是采用的固定定位。

    1.5K20

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

    二、定位基础 CSS定位属性允许我们改变元素在文档流中的位置，从而实现更复杂的布局效果。CSS提供了几种不同的定位方式：静态定位、相对定位、绝对定位、固定定位和粘性定位。...即使元素视觉上移动了，文档流中的位置不变。 绝对定位 绝对定位使元素脱离文档流，完全按照我们指定的位置进行排列。... 绝对定位的元素相对于其最近的定位祖先元素（​​.container​​​）进行定位，位置被设置为距离顶部30px和距离左边40px。...这是一个固定定位的元素 滚动页面查看效果 示例中固定定位的元素始终固定在视口的右下角，即使页面滚动也不受影响...z-index​​ ​​z-index​​ 属性控制元素的堆叠顺序。值较大的元素会覆盖值较小的元素。​​

    9410

    【CSS】布局属性：position

    答案是:position position position:static; (默认值) 没有定位，元素出现在正常的流中，top, bottom, left, right, z-index 属性不生效。...position:relative; 生成相对定位的元素，相对于其正常位置进行定位。 因为相对于元素原本位置（static）进行定位，所以无法使用z-index属性，只能在同平面上进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 元素的层叠通过"z-index"属性进行规定。...position:fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。...left、top、right、bottom、z-index fixed 相对浏览器绝对定位 left、top、right、bottom、z-index inherit 继承父布局position样式

    53630

    css(2)

    1.10.2relative（相对定位，了解） 相对定位是相对于该标签原来的位置进行定位。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 ?...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index...z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位的元素，永远压住没有定位的元素

    1.5K20

    CSS 布局_3 Position元素定位

    relative 生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20px;" 会向元素的 left 位置添加 20 像素 absolute 生成绝对定位的元素，相对于 static...position:absolute 绝对定位 position:absolute; 绝对定位，相对定位父级而定位，即父级元素或祖先元素 position 不为默认值 static，就是定位父级，如果没有设置该属性的祖先元素...，则一直回溯到 body 元素，元素的偏移位置不影响文档流中的任何元素，其 margin 不与其他任何 margin 折叠 元素设置 position:absolute; 绝对定位之后，脱离文档流，不占据文档流的空间位置...，但是，设置了 position:absolute 和 position:fix; 属性的元素，都脱离了文档流，即不会占据当前层的空间位置，而是来到了上一层，并且会覆盖下层的元素，如果下层元素不想被覆盖...轴定义的是在页面上的位置，而 Z 轴定义的是层叠的层次，z-index 的默认值为 0 ，元素的 z-index 属性值越高，就意味着该元素在层叠顺序中更靠近顶部，如果两个元素在 XY 平面上有重叠，

    93740

    五. css 布局之 position（定位）

    时则开启了元素的相对定位 相对定位的特点： 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化 2.相对定位是参照于元素在文档流中的位置进行定位的 3.相对定位会提升元素的层级 4.相对定位不会使元素脱离文档流...5.相对定位不会改变元素的性质块还是块，行内还是行内 偏移量（offset） 当元素开启了定位以后，可以通过偏移量来设置元素的位置 top：定位元素和定位位置上边的距离 bottom：定位元素和定位位置下边的距离...当元素的position属性值设置为absolute时，则开启了元素的绝对定位 绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离...3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升一个层级 5.绝对定位元素是相对于其包含块进行定位的 包含块( containing block ) 正常情况下：...1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质

    2.2K41

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

    浮动布局的生成： css 属性 float：left/right/none 左浮动/右浮动/不浮动（默认）。 浮动的影响： 不会影响未浮动的块级元素布局，但会影响内联元素的布局。...relative 相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素。...另外，设置元素的 margin 属性，实际上 margin 区域会出现在元素定位之前的位置。...绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的，另外，绝对定位的元素会自动忽略有定位属性的祖先元素的 padding 属性。...如果定位元素的父元素也设置了 z-index 属性，那么子元素的 z-index 属性将失效，并且最终是根据父元素的 z-index 属性来判断覆盖关系。

    1.6K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券