css继承,position:fixed固定定位

发布时间 2023-09-22 15:18:23作者: 崛起崛起

CSS 继承是指元素可以继承其父元素的某些样式属性值。当一个元素应用了某个样式属性值,而其子元素没有显式地指定该属性值时,子元素会从父元素继承该属性值。
以下是一些常见的 CSS 属性可以被继承的例子:

1.字体样式属性:font-family、font-size、font-weight、font-style、line-height 等。
2.文本样式属性:color、text-align、text-decoration、text-transform 等。
3.元素展示相关属性:display、visibility、float、clear 等。
4.元素间距属性:margin、padding、border 等。
5.列表样式属性:list-style-type、list-style-position、list-style-image。

然而,并非所有的 CSS 属性都可以被继承。例如:

6.定位属性:position、top、left、right、bottom 等。
7.盒模型属性:width、height、border-radius、box-shadow 等。
8.背景属性:background-color、background-image、background-position 等。

要注意的是,尽管某个属性可以继承,但也可以通过显式定义子元素的样式来覆盖继承的值。
如果你想要禁止继承,可以使用 inherit 值来重置样式属性,或者使用 initial 值来将属性重置为初始值。
例如:

.parent {
  font-family: Arial;
  color: blue;
}

.child {
  font-size: inherit; /* 继承父元素的字体大小 */
  color: initial; /* 将文本颜色重置为初始值 */
}

在这个例子中,子元素 .child 继承了父元素 .parent 的字体系列和颜色属性。通过设置 font-size: inherit;,子元素继承了父元素的字体大小。通过设置 color: initial;,子元素的文本颜色被重置为初始值。
CSS 继承在样式定义和覆盖方面提供了一种便利的机制,但要注意不同属性的继承行为可能有所不同,需要根据具体的属性进行了解和使用。

position:fixed固定定位
position: fixed; 是相对于浏览器窗口(viewport)进行定位的,而不是相对于父元素进行定位。

当元素使用 position: fixed; 样式时,它会以窗口(viewport)为参考点,即使页面滚动,该元素也会保持在固定的位置。

要实现相对于父元素的定位,可以使用 position: absolute; 配合设置父元素的 position 属性来实现。具体为:

将父元素的 position 属性设置为 relative 或 absolute,以创建一个定位上下文。

.parent {
  position: relative;
}

在子元素中,即需要相对于父元素进行定位的元素,使用 position: absolute; 进行定位,并使用 top、right、bottom 和 left 属性来确定其位置。

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

在上述示例中,.parent 元素被设置为相对定位的容器,.child 元素使用绝对定位,并相对于 .parent 元素进行定位。通过设置 .child 元素的 top 和 left 属性,可以将其相对于 .parent 元素的左上角偏移 50 像素。

使用这种方法,子元素(.child)会相对于其最近的设置了 position: relative; 或 position: absolute; 的父元素(.parent)进行定位。

请注意,.parent 元素不能是 position: static;(默认值),否则子元素的定位将无法相对于其进行定位。