1.background-position:表示背景定位的属性。描述属性值时,有两种方式:一是像素描述;而是单位描述。

(1)像素描述:

格式如下:

  background-position:向右偏移量 向下偏移量;

属性值可以是正数,也可以是负数。比如:100px 200px-50px -120px

举例如下:

(2)单词描述

格式如下:

     background-position: 描述左右的词 描述上下的词;
  • 描述左右的词:left、center、right
  • 描述上下的词:top 、center、bottom

比如说,right center表示将图片放到右边的中间;center center表示将图片放到正中间。

background综合属性

background属性和border一样,是一个综合属性,可以将多个属性写在一起。(在盒子模型这篇文章中专门讲到boder)

举例1:

  background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于:

     background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

以后,我们可以用小属性层叠掉大属性。

上面的属性中,可以任意省略其中的一部分。

比如说,对于下面这样的属性:

 background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

效果如下:

值得注意的一点是:background-color和background-image两个属性合起来一起写时,需要按照顺序才能生效,即color必须写在前面,image必须写在后面。

无论是

         background:red;
background:url();

还是

      background-color:red;
background-image:url();

color必须写在前面才可以达到两者并存的效果,有也只有这样的顺序才可以实现效果。

附图:

2.position表示定位属性,共三种定位属性值,分别是绝对定位、相对定位、固定定位。

 position: absolute;  <!-- 绝对定位 -->
position: relative; <!-- 相对定位 -->
position: fixed; <!-- 固定定位 -->

(1)相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调),相对定位不脱离标准流,别人不会把它的位置挤走,它的作用有两个:1)主要微调元素;2)做绝对定位的参考,子绝父相(绝:绝对定位,相:相对定位)

格式如下:

 position: relative;
left: 50px;/*横坐标:正值表示向右偏移,负值表示向左偏移*/
top: 50px;/*纵坐标:正值表示向下偏移,负值表示向上偏移*

相对定位的定位值

  • left:盒子右移

  • right:盒子左移

  • top:盒子下移

  • bottom:盒子上移

PS:负数表示相反的方向。

(2)绝对定位:定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示,纵坐标用top或者bottom表示。绝对定位的盒子脱离了标准文档流。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block就可以设置宽、高了。格式如下:

     position: absolute;  /*绝对定位*/
left: 10px; /*横坐标*/
top/bottom: 20px; /*纵坐标*/

绝对定位的参考点(重要)

(1)如果用top描述,那么参考点就是页面的左上角,而不是浏览器的左上角:

(2)如果用bottom描述,那么参考点就是浏览器首屏窗口尺寸(好好理解“首屏”二字),对应的页面的左下角:

(3)固定定位:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变

参考链接

https://www.cnblogs.com/qianguyihao/p/8277895.html

https://www.cnblogs.com/qianguyihao/p/8296748.html

https://www.cnblogs.com/hi-shepherd/p/6084574.html

background-position和position的更多相关文章

  1. 浅析position:relative position:absolute

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是: ...

  2. position&containing block

    一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...

  3. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  4. pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

    event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...

  5. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  6. 网页布局:float与position的区别

    网页开发中布局是一个永恒的话题.巧妙的布局会让网页具有良好的适应性和扩展性.css的布局主要涉及两个属性——position和float.它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明 ...

  7. position:sticky用法

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  8. jqueryui.position.js源代码分析

    近期要写前端组件了.狂砍各种组件源代码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源代码整体结构图 1.看到$.fn.position ...

  9. 理解css 中的position五个属性

    在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试 一般的在w3c中我们可以很容易的获取定义: static : 默认值.没有定位,元素出现在正常的 ...

  10. CSS3的position:sticky介绍

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

随机推荐

  1. tf.squeeze()

    转载自:https://www.cnblogs.com/mdumpling/p/8053376.html 原型 tf.squeeze(input, squeeze_dims=None, name=No ...

  2. H3C 802.1X基本配置

  3. linux 禁止所有中断

    如果你需要禁止所有中断如何? 在 2.6 内核, 可能关闭在当前处理器上所有中断处理, 使用任一个下面 2 个函数(定义在 <asm/system.h>): void local_irq_ ...

  4. 两种方法,轻松上手ConfigMap!

    属性配置文件在任何应用程序中都非常重要.它们不仅可以让应用程序具备灵活性,还能够根据文件中配置的值产生不同的功能.实际上,在staging.开发.测试.UAT或生产环境中,我们都使用属性配置文件来驱动 ...

  5. Apache的DBUtils框架学习(转)

    一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...

  6. linux下文件的一些文件颜色的含义

    红色---->代表压缩文件 红色闪烁---->代表链接文件有问题 黄色---->代表设备文件 深蓝色---->代表目录 浅蓝色----->代表链接文件 绿色----> ...

  7. centos7 断电导致 generating /run/initramfs/rdsosreport.txt 问题

    开机就进入命令窗口,窗口提示信息如下: generating “/run/initramfs/rdsosreport.txt” entering emergencymode. exit the she ...

  8. Lambda函数到底是个什么

    1 什么是Lambda函数 lambda函数是指简单的代码片段,通常认为是不值得命名的函数,它不能重复使用,能方便程序员使用,增强代码可读性,降低代码出错概率. [ 捕获列表 ] (参数) -> ...

  9. libcurl库的简单使用

    #include <stdio.h> #include <tchar.h> #include <windows.h> #include <process.h& ...

  10. 浅谈Java中接口与抽象类的异同

    浅谈Java中接口与抽象类的异同 抽象类和接口这两个概念困扰了我许久,在我看来,接口与抽象类真的十分相似.期间也曾找过许许多多的资料,参考了各路大神的见解,也只能是简简单单地在语法上懂得两者的区别.硬 ...