首页 > 其他分享 >css继承,position:fixed固定定位

css继承,position:fixed固定定位

时间:2023-09-22 15:23:35浏览次数:37  
标签:定位 parent 继承 元素 position fixed css 属性

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;(默认值),否则子元素的定位将无法相对于其进行定位。

标签:定位,parent,继承,元素,position,fixed,css,属性
From: https://www.cnblogs.com/hxy--Tina/p/17722451.html

相关文章

  • css伪元素的应用(超实用的图标库)
    知识储备伪元素:伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。伪元素主要有:::first-letter第一个字母的样式::first-line首行文字的样式::before元素头部添加的修饰::after元素尾部添加的修饰::placeholderinput的占位符样式::selection被选中......
  • css01小结
    <!--CSS的引入外链式定义一个css文件,直接写然后在head标签内用link引入<linkrel="stylesheet"href="">内嵌式head标签内写style标签行内式直接在标签内写style定义,没有做到结构与样式分离,所以不用......
  • CSS的背景属性
    背景属性包括:color颜色属性、image图片、position显示位置,repeat填充,size属性基本格式为background-+属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......
  • CSS的字体属性
    字体属性:颜色、大小、加粗、文字样式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docume......
  • css实现文字切换
    .textc{--num:'今日大吉';animation:text-change3slinearforwards;}.textc::after{content:var(--num);font-size:20px;}@keyframestext-change{33%{--num:'明日好运';}67%{--num:'......
  • 响应头:关于文件下载的Content-Disposition和Content-Type(转载)
    Content-Type实体头部用于指示资源的MIME类型,在响应中,Content-Type标头告诉客户端实际返回的内容的类型,指示客户端如何显示附加的文件。  Content-Disposition是MIME协议的扩展,指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分,这种方式就与Content-Type......
  • html与css小知识
    html入门学习参考资料:https://www.cnblogs.com/gh110/p/15153664.html参考视频:https://www.bilibili.com/video/BV1x4411V75C扩展:qq邮箱扩展(点击联系我)可以打开qq推广弄iframe可以作为a标签的目标,然后一键点击跳转!点文字就可以锁定文字对应的框表单......
  • 看到过的css 属性!!!
    记录一下看到过的,没见过的不知道就算了; inline-size:60pxblock-size:30pxpadding-block:10px这三个文字属性和writing-mode:有关,writing-mode设置文字是从左往右排列还是从上往下   关于nth-child!!! MDN文档里解释p:nth-child(1){background-color......
  • 用css控制td强制换行
    即便是给td限定的宽度,但是如果里面的内容是连续的,IE就认为是一个单词,不会换行。控制td换行的css样式:style="word-wrap:break-word;word-break:break-all;"<tablewidth="100%"border="0"cellspacing="1"cellpadding="0"><tr><tdwi......
  • css字体---跨站引入报跨域问题【解决方法】
    最近遇到一个问题,考虑到网站的性能,需要将图标字体单独放到一个网站引入,减少资源占用,但是遇到一个问题,引入字体文件的时候,报跨域的错误。具体解决方法:将图标字体转base64转换网址:https://transfonter.org/按照以下三个步骤进行操作: 然后下周这个: 里面有个:stylesheet.cs......