标签：定位 color 元素 相对 position CSS 属性
目录
定位
position
此属性规定应用于元素的定位方法的类型。
- static（默认情况，静态定位的元素不受 top、bottom、left 和 right 属性的影响）
- relative（设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间）
- fixed（相对于视口定位，这意味着即使滚动页面，它也始终位于同一位置）
- absolute（相对于最近的定位祖先元素进行定位）
- sticky(根据用户的滚动位置进行定位)
当开启了元素定位时（position的属性值是一个非static的值），可以通过left right top bottom 四个属性来设置元素的偏移量
| 属性 | 作用 |
|---|---|
| left | 元素相对于其定位位置的左侧偏移量 |
| right | 元素相对于其定位位置的右侧偏移量 |
| top | 元素相对于其定位位置的上侧偏移量 |
| bottom | 元素相对于其定位位置的下侧偏移量 |
例:
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
相对定位
- 当元素的position属性设置为relative时，开启元素的相对定位
- 开启相对定位后的特点：
- 开启相对定位以后，而不设置偏移量时，元素不会发生任何变化
- 相对定位的元素不会脱离文档流
- 相对定位会使元素提升一个层级
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}绝对定位
position属性值设置为absolute。
绝对定位的特点：
- 开启绝对定位，会使元素脱离文档流。
- 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。
- 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的相对定位都会同时开启父元素的相对定位）；如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
- 绝对定位会使元素提升一个层级。
- 绝对定位会改变元素的性质：内联元素变成块元素，块元素的高度和宽度默认都被内容撑开。
固定定位
position属性值设置为fixed。
特点：
- 固定定位永远都会相对于浏览器窗口进行定位
- 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
- IE6不支持固定定位
粘性定位
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴/固定”在适当的位置（比如 position:fixed）。
注：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。
Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}z-index
此属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
可做重叠元素效果。如文字在图片上方。
注意：
- 对于没有开启定位的元素不能使用z-index
- 可以为z-index指定一个值，该值将会作为当前元素的层级；层级越高，越优先显示
- 如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}opacity
此属性设置元素的不透明级别。
| 值 | 描述 | 测试 |
|---|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 | 测试 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
0.5效果
透明悬停效果
opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度。
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}透明盒中的文本
效果图
<html>
<head>
<style>
div.background {
background: url(pattern.webp) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Hello World!</p>
</div>
</div>
</body>
</html>下拉式菜单
效果
代码
<style>
/* 设置下拉按钮的样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容（默认隐藏） */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 下拉链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>标签：定位,color,元素,相对,position,CSS,属性 来源： https://blog.csdn.net/weixin_43918232/article/details/122802050
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。