position: absolute;/*相对父类定位*/ top: 40px;/**/ left: 50%;/**/

`position: absolute;` 是 CSS 中的一个定位属性，它将元素相对于其最近的已定位（非 static）祖先元素进行定位。当设置为 `absolute` 时，元素不会影响其正常文档流，而是被移动到指定的位置，这个位置是基于其 `left` 和 `top` 属性的值来计算的。 `top: 40px;` 表示元素上边距距离其最近的已定位祖先元素的顶部边缘有 40 像素的距离。如果祖先元素没有其他定位设置，那么会相对于视口的顶部。 `left: 50%;` 则表示元素左边距距离其最近的已定位祖先元素的左边边缘有其自身宽度的一半。这通常与 `transform: translateX(-50%);` 结合使用，这样可以使元素在其父元素正中央垂直对齐。总结一下，`position: absolute; top: 40px; left: 50%;` 的作用是让元素在页面上脱离常规文档流，以绝对方式定位，并放置在父元素的中心偏上 40 像素的位置。

<style> #logo { width: 100px; /* 设置图片宽度为100像素 / height: 100px; / 设置图片高度为100像素 / position: absolute; / 将图片设置为绝对定位 / top: 10px; / 将图片距离顶部10像素 / left: 10px; / 将图片距离左侧10像素 */ }

这段代码是CSS样式代码，其中使用了`#logo`选择器来选择id为`logo`的元素，并设置了其宽度、高度、位置等样式。具体含义如下： - `width: 100px;`：设置元素的宽度为100像素。 - `height: 100px;`：设置元素的高度为100像素。 - `position: absolute;`：将元素设置为绝对定位，这意味着元素不再遵循文档流，而是可以自由地通过`top`、`right`、`bottom`和`left`属性来定位。 - `top: 10px;`：将元素距离父元素顶部的偏移量设置为10像素。 - `left: 10px;`：将元素距离父元素左侧的偏移量设置为10像素。这些样式可以应用于任何元素，不仅限于图片。例如，以下代码将一个名为`mydiv`的`<div>`元素设置为宽度为200像素、高度为100像素，并将其定位到距离顶部50像素、左侧100像素的位置： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <style> #mydiv { width: 200px; height: 100px; position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div id="mydiv">  </div> </body> </html> ```

.sidebar { display: block; position: absolute; left: 0; top: 70px; bottom: 0; overflow-y: scroll; /* background: #4bae32; */ }

这段代码定义了一个 CSS 样式规则，它用于设置一个侧边栏的样式。其中，.sidebar 是一个 CSS 类名，表示应用这个样式规则的元素是具有该类名的元素。样式规则中的属性如下： - display: block; 表示显示为块级元素，即占据一整行的宽度。 - position: absolute; 表示使用绝对定位，相对于最近的已定位祖先元素进行定位。 - left: 0; 表示距离最近的已定位祖先元素的左侧为 0，即靠左对齐。 - top: 70px; 表示距离最近的已定位祖先元素的顶部为 70px，即距离顶部有 70px 的偏移量。 - bottom: 0; 表示距离最近的已定位祖先元素的底部为 0，即高度与父元素相同。 - overflow-y: scroll; 表示在侧边栏高度超出父元素高度时，显示纵向滚动条，可以滚动查看内容。 - /* background: #4bae32; */ 是注释部分，表示设置了一个背景颜色，但是被注释掉了，即没有作用。

position: absolute;/相对父类定位/ top: 40px;// left: 50%;//

<style> #logo { width: 100px; /* 设置图片宽度为100像素 / height: 100px; / 设置图片高度为100像素 / position: absolute; / 将图片设置为绝对定位 / top: 10px; / 将图片距离顶部10像素 / left: 10px; / 将图片距离左侧10像素 */ }

.sidebar { display: block; position: absolute; left: 0; top: 70px; bottom: 0; overflow-y: scroll; /* background: #4bae32; */ }

相关推荐

position: absolute;/*相对父类定位*/ top: 40px;/**/ left: 50%;/**/

<style> #logo { width: 100px; /* 设置图片宽度为100像素 */ height: 100px; /* 设置图片高度为100像素 */ position: absolute; /* 将图片设置为绝对定位 */ top: 10px; /* 将图片距离顶部10像素 */ left: 10px; /* 将图片距离左侧10像素 */ }

.sidebar { display: block; position: absolute; left: 0; top: 70px; bottom: 0; overflow-y: scroll; /* background: #4bae32; */ }

相关推荐

fixed相对父元素定位

CSS绝对定位元素left设为50%实现水平居中

css子元素相对父元素进行定位的实现

left: 88%; position: absolute;

.logo_0 img::before { content: ""; display: block; padding-top: 0; /* 将 padding-top 设置为 0 */ } .logo_0 img { width: 100%; height: auto; /* 将 height 设置为 auto */ object-fit: cover; top: 0; left: 0; }为什么还是竖着的

/* opacity: 0.5; background-color: #BEE7E9; */ background: rgba(190, 231,233, 0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 80px auto 0 auto; height: 800px; width: 910px; border-radius: 50px;想要实现居中显示，如何删改这串代码实现

最新推荐

1719378276792.jpg

京瓷TASKalfa系列维修手册：安全与操作指南

管理建模和仿真的文件

【进阶】入侵检测系统简介

轨道障碍物智能识别系统开发

小波变换在视频压缩中的应用

"互动学习：行动中的多样性与论文攻读经历"

【进阶】Python高级加密库cryptography

linuxjar包启动脚本

Microsoft OfficeXP详解：WordXP、ExcelXP和PowerPointXP

position: absolute;/相对父类定位/ top: 40px;// left: 50%;//

<style> #logo { width: 100px; /* 设置图片宽度为100像素 / height: 100px; / 设置图片高度为100像素 / position: absolute; / 将图片设置为绝对定位 / top: 10px; / 将图片距离顶部10像素 / left: 10px; / 将图片距离左侧10像素 */ }

.logo_0 img::before { content: ""; display: block; padding-top: 0; /* 将 padding-top 设置为 0 / } .logo_0 img { width: 100%; height: auto; / 将 height 设置为 auto */ object-fit: cover; top: 0; left: 0; }为什么还是竖着的