background属性和position属性

Posted 陌简001

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了background属性和position属性相关的知识,希望对你有一定的参考价值。

最近看到一个页面,当文本内容长时,背景不动,内容跟着变化,使用到了CSS的background-attachment:fixed属性,这篇文章,就来说一下background和position属性

1.CSS中的背景(背景是不可继承的)

  • background-color   默认值为transparent
  • background-image  参数设置如:url(./img.jpg)
  • background-repeat: repeat-y;  参数设置如:repeat-x  repeat-y  no-repeat
  • background-position:center;  参数设置如:top  bottom left right center,也可以使用百分号(指的是图像中心和元素中心对齐,如果设置为50% 50% 则在图像的最中间 如果设置为0 0 则在左上角对齐; 如果设置为100% 100%则为图像的右下角对齐。如果固定值则不同,设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上)
  • background-attachment:fixed;默认值是 scroll,参数为scroll  fixed。
  • background :  background-color background-position background-size background-repeat background-origin background-clip background-attachment  background-image  简写属性,参数设置

2.CSS的position属性

static:无特殊定位,对象遵循正常文档流。top,right,bottom,left ,z-index等属性不会被应用。


relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。


absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。( 如果使用absoulte或fixed定位的话,必须指定 left、right、 top、 bottom 属性中的至少一个,否则left/right/top/bottom属性会使用它们的默认值 auto ,这将导致对象遵从正常的html布局规则,在前一个对象之后立即被呈递,简单讲就是都变成relative,会占用文档空间,加上这两个属性是完全必要的.

除此之外,absoulte是根据祖先类的border进行的定位 ,<html>和<body>元素相差9px左右 relative和static方式在最外层时是以<body>标签为定位原点的,而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。)


fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性定义。

参考一题小题:

链接:https://www.nowcoder.com/questionTerminal/33c230727abe4ed3972564fe6c9fef2a
来源:牛客网

以下代码,分别给节点
#box增加如下样式,问节点#box距离body的上边距是多少?

<body style=”margin:0;padding:0”>

<div id=”box” style=”top:10px;margin:20px 10px;”>

</div>

</body>

1.如果设置position: static ; 则上边距为        px

2.如果设置position: relative ; 则上边距为     px

3.如果设置position: absolute ; 则上边距为      px

4.如果设置position: sticky ; 则滚动起来上边距为   px

 

 

答案为:

position: static ; 则上边距为(  20 )px  静态定位 top值无效

position: relative ; 则上边距为(  30 )px 移动的时候会包括margin

position: absolute ; 则上边距为(  30 )px 移动的时候会包括margin

position: fixed ; 则上边距为(  30 )px  固定定位的margin也会生效  移动的时候也会包括margin

position: sticky ; 则上边距为(  20 )px,页面滚动起来为(10)px,margin会无效;页面没滚动的 时候是静态定位

 

以上是关于background属性和position属性的主要内容,如果未能解决你的问题,请参考以下文章

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

IE8和IE7如何获取background-position属性值

CSS 背景位置 background-position属性

background-origin:规定 background-position 属性相对于什么位置来定位

object-fit,object-position 和 background-size 和 background-position

background-position和background-size的顺序问题