-- 固定定位 --> 相对定位 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。...以盒子为参考点 一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 如下：（子绝父相） ? 以下几点需要注意。...用途1：网页右下角的“返回到顶部” 比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。...*/ } **用途2：**顶部导航条 我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。...定位了的元素，永远能够压住没有定位的元素。 （4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
0 , 即可设置为顶部导航栏 , 其位置不受页面滚动影响 ; /* 设置固定定位 */ position: fixed; top: 0; 由于顶部的导航栏设置了 绝对定位 , 该元素是脱标的..., 下方的网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于 顶部导航栏的高度 ; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素...此处标准流盒子设置 100px 的外边距 防止被顶部的固定定位盒子覆盖 */ margin-top: 55px; 由于设置 绝对 / 固定 定位 , 会将元素变为行内块元素 , 其宽度是内部子元素的宽度...*/ /* 该盒子要设置成占用整个水平宽度 */ width: 100%; 顶部导航栏盒子需要设置到最上层 , 防止其被设置了定位的网页内容覆盖 ; /* 该盒子位于最上层 不要被其它盒子覆盖...*/ padding: 10px; /* 顶部的固定定位盒子高度 100px 由于其脱标会覆盖标准流元素 此处标准流盒子设置 100px 的外边距 防止被顶部的固定定位盒子覆盖
，它位于自己的层独立于一切。...（即绝对定位元素应该位于从“包含元素”的顶部 30px，从左边 30px。） # 定位上下文 哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的 position 属性。...https://codepen.io/cellinlab/pen/xxYymGb # 固定定位 固定定位 fixed，与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。...，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。
使用 position: sticky 使用 position: sticky 时，每个人都很快明白，当视口到达定义的位置时，元素会粘在那里。...Fixed - 当项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的相同位置，从流中移除。...Absolute 定位 - 在粘附区域的末尾，元素停止并堆叠在另一个元素的顶部，就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部？...在大多数情况下，使用 position: sticky 以将元素固定在顶部，类似于这样： .component{ position: sticky; top: 0; } 这正是它被创建出来的原因...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。
当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。...这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中： 设置的宽度和高度。...当一个子项目有一个margin是auto 时，它将被推到远的另一边。例如，如果一个flex项目的左边是margin-left: auto，那么它将被推到最右边。...好吧，原因是绝对定位的元素相对于其最接近的父元素具有position：relative。 该父项具有padding: 16px，因此子项位于顶部和左侧的16px处。 有趣，不是吗？
fixed 固定定位，相对于浏览器窗口进行定位 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...相对定位relative 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。 注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。...它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。...当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表示。但是，元素和元素之间的位置如果有所重叠，谁显示在前面，就涉及到另一个轴：z轴。...如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。...将B的宽度改为150px的话就会掉下来，但是这种方式与使用 clear 特性清除浮动不同。 适用于哪些元素 可设置给任意元素，但只适用于生成非绝对定位框的元素。对于绝对定位的元素，浮动没有任何效果。...当一个浮动框发生在两个margin折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。 第一句好理解，说的是顶边不能超出包含块，跟左边右边不能超出一个道理。...后面的规则是说，当浮动框处于两个发生margin折叠的地方时，会被当作被包含在一个空的块框中，它上面和下面的margin会穿过它发生margin折叠，当它不存在。 <!
right 右侧偏移量，定义元素相对于其父元素右边线的距离 # 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...absolute (拼爹型) 当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 # 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
而这个标准的文档流布局方式就是按照解析 HTML 文档元素的顺序，从页面顶部开始，从上到下，从左到右，解析一个元素就绘制一个元素，解析时碰到的是行内元素，就忽略宽高，允许并排布局绘制，碰到的是块级元素，...: absolute 固定定位 position: fixed inline-block(行内块元素) 当设置了 display: inline-block 时，这时这个元素就不会霸占一整行了，而是根据设置的宽高来布局绘制...float 浏览器绘制这个网页时，按照文档流顺序，先在网页第一行左边开始处理 div1 元素，发现它的一个浮动元素，则将其抽离到另一个层面，浮动在文档流上面。...应用场景： 微调 让后代元素可以使用绝对定位 通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。...也就是说在父类元素中，不管是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。 但通常都是使用子绝父相的模式，其他模式并没有什么意义。
自述 应用布局 应用程序布局是一个样式，指令和组件系统，当它们一起使用时，可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏，抽屉和导航样式。...固定性抽屉 固定性抽屉是不能关闭的抽屉。 它们完全由CSS提供。 要具有固定性抽屉，请将material属性添加到material-drawer元件。...临时抽屉具有可选的overlay属性，可用于在抽屉打开时在非抽屉内容上方显示透明覆盖。...如果它位于material-content之上，则抽屉和内容将位于应用栏下方，用于固定性和持久性抽屉。...isExpanded bool 当抽屉扩展到全屏时，“True”。 Outputs: visibleChange Stream 抽屉的可见性发生变化时触发事件。
元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。...对于float来说，一定要注意窗口的大小，当宽度不足时，会造成块元素的换行，对原有样式产生较大影响。...此外，不要注意当需要去除浮动的影响时，可以使用clear属性，包括left,right,both,none和inherit，指定clear:left确保左边不允许出现其他的浮动元素。...内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。...通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏
浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!
常见的行内元素有a,strong,span。给元素设置样式：display: inline，会将该元素变为行内元素。因此，当发现给元素设置宽高无效时，检查这元素是否是行内元素。...代码： .container { display: flex; align-items: center; } 场景13 元素始终位于父元素右上角 可以用 绝对定位 来实现元素始终位于父元素右上角...实现元素始终位于父元素右上角的做法：将父元素设置为定位元素，子元素设置为绝对定位元素即可。...可以用 固定定位 来实现元素始终位于页面的右下角。...绝对定位元素水平居中时，距定位元素左侧的值为 50%*定位元素宽度 - 50%*元素宽度。
现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。...这种看似毫无用处的技巧，却能帮助我们解决一些项目实际问题。我们总希望我们的布局是自适应的，即不依赖与所处环境，当环境改变时，仍能完美工作。下面这个实例要求蓝色购买按钮水平居中，其后跟随一个链接。...(当然，通过嵌套的方式也可实现，但不是最优解) 另一个案例是用以实现下拉菜单，下拉菜单通常由触发按钮和下拉列表组成，下拉列表的位置位于触发按钮的下方。...9.6 Absolute positioning 从常规流中完全抽离，对其后继兄弟元素无影响。 固定定位是绝对定位的特例，它的包含块是viewport。...精确地讲，一个元素的静态top值，是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。
现介绍两个绝对定位的使用技巧： 1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。... 这种看似毫无用处的技巧，却能帮助我们解决一些项目实际问题。我们总希望我们的布局是自适应的，即不依赖与所处环境，当环境改变时，仍能完美工作。... 另一个案例是用以实现下拉菜单，下拉菜单通常由触发按钮和下拉列表组成，下拉列表的位置位于触发按钮的下方。...9.6 Absolute positioning 从常规流中完全抽离，对其后继兄弟元素无影响。 固定定位是绝对定位的特例，它的包含块是viewport。...精确地讲，一个元素的静态top值，是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。
固定定位，相对于浏览器窗口定位 */ position: fixed; /** * 粘性定位，元素在滚动时定位，到达指定位置时变为固定定位 */ position: sticky; position...: 20px; left: 20px; } 绝对定位可以让元素脱离文档流，相对于距离最近的非static定位的父元素进行定位。...五、粘性定位的应用 .sticky-item { position: sticky; top: 20px; } 粘性定位可以让元素在滚动时按指定位置定位，到达指定位置后则变为固定定位，不会影响其他元素位置...常用于实现顶部导航或滚动时的固定搜索框效果。...，当屏幕宽度小于768px时，取消绝对定位，通过静态定位实现自适应布局。
它还在 HTML 中提供了有用的注释，例如当一个元素导致另一个元素溢出时，Firefox 还为 flex 和网格布局提供了非常漂亮的图形，谈到哪个布局或元素相对于彼此的位置历来是最重要的布局之一。...，允许你在 UI 中的任何位置创建灵活的列或行，当元素具有显示 flex 时，它还具有 x 和 y 轴，你可以在其上对齐其子项。...当涉及到布局时，Flexbox 通常是我使用的第一个工具，但它确实有一个主要缺点，如果你有一个包含许多相交行和列的大型复杂 UI，你最终可能会在 HTML 中使用大量容器或包装元素。 ?...hack，你在顶部放置 56.25 填充然后给子元素绝对定位。...给出你想要的任何名称，然后在应用所需的选择器时增加它，它将从 0 开始，然后向 dom 中的每个 h1 元素添加 1。 ?
:nth-of-type 计数时只计算同种类型的元素,会排除所有的干扰项 三....粘性定位 sticky 另外还有一个定位的值是position: sticky，比起其他定位值要新一些. sticky是一个大家期待已久的属性; 可以看做是相对定位和固定(绝对)定位的结合体; 它允许被定位的元素表现得像相对定位一样...，直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定(绝对)定位; sticky是相对于最近的滚动祖先包含滚动视口的( the nearest ancestor scroll container...(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界 浮动规则三 规则三: 浮动元素之间不能层叠 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮...元素、块级元素的文字内容 浮动规则五 规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐 2.3.
坚持视觉层次结构只是说信息从最重要到最不重要的组织方式的一种奇特方式。 观众定义什么对他们最重要；设计师只是给了他们一些提示。 观众首先看到的任何信息都被确定为最重要的，因此位于层次结构的顶部。...视觉层次中没有听觉体积，但元素的大小和比例有类似的效果。 其中一个显然比另一个更重要。 元素越大，我们就越有可能看到它，将它移向层次结构的顶部。 可以缩小不那么重要的元素以降低可见性和重点。...这会将这些元素移向视觉层次结构的底部。 这并不一定意味着最重要的元素必须是巨大的。适度使用大小并保持品味；太大的元素可能会压倒设计的其余部分，而太小的元素可能会在翻译中丢失。...2.级排版也应该脱颖而出，但不如你的一级。这些应该有助于将您的设计组织成具有相关信息的组或部分。它应该分解文本并向读者暗示一些方向。 3.当页面主要由文本组成时，使用3 级排版。...相反，它让观众和读者在进入下一个元素之前有一点时间喘口气，并且可以帮助将重要元素变成焦点，而不仅仅是看起来像机器中的另一个齿轮。 阅读模式 在所有文化中，人类都是从上到下阅读的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
