CSS＜3＞

2023-10-16 10:59:58

定位

position

定位

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>

码农公寓

定位

position

相对定位

绝对定位

固定定位

粘性定位

z-index

opacity

透明悬停效果

透明盒中的文本

下拉式菜单

代码

相关文章