background-position和position
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的更多相关文章
- 浅析position:relative position:absolute
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是: ...
- position&containing block
一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 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 ...
- CSS 属性 - position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...
- 网页布局:float与position的区别
网页开发中布局是一个永恒的话题.巧妙的布局会让网页具有良好的适应性和扩展性.css的布局主要涉及两个属性——position和float.它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明 ...
- position:sticky用法
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- jqueryui.position.js源代码分析
近期要写前端组件了.狂砍各种组件源代码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源代码整体结构图 1.看到$.fn.position ...
- 理解css 中的position五个属性
在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试 一般的在w3c中我们可以很容易的获取定义: static : 默认值.没有定位,元素出现在正常的 ...
- CSS3的position:sticky介绍
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
随机推荐
- 模板——BigInteger
#include <iostream> #include <cstring> #include <string> #include <vector> # ...
- 【9104】&&【a103】阶乘和
Time Limit: 10 second Memory Limit: 2 MB 问题描述 已知正整数n(n≤100),设s=1!+2!+3!+...+n!.其中"!"表示阶层,即 ...
- UVa1601 - The Morning after Halloween [单向bfs]
解题思路: 1.注意到2*2方格中必有一个#,那么最多只有192条通道,可以将所有非‘#’的位置提取出来用邻接表的方式建图,通过bfs搜索目标位置. 2.将三个ghost的位置(a,b,c)作为状态量 ...
- 2018-11-8-WPF-获取下载内容长度
title author date CreateTime categories WPF 获取下载内容长度 lindexi 2018-11-08 20:18:15 +0800 2018-11-08 20 ...
- tensorflow在文本处理中的使用——Word2Vec预测
代码来源于:tensorflow机器学习实战指南(曾益强 译,2017年9月)——第七章:自然语言处理 代码地址:https://github.com/nfmcclure/tensorflow-coo ...
- 2018-10-19-C#-AddRange-添加位置
title author date CreateTime categories C# AddRange 添加位置 lindexi 2018-10-19 9:3:8 +0800 2018-2-13 17 ...
- 2018百度之星初赛B - A,D,F
总结:这一次的百度之星之行到这里也就结束了,充分的认识到了自己的不足啊...果然还是做的题太少,,见识的题型也还太少,对于STL的掌握还是不够到位啊!!(STL大法是真的好,建议大家认认真真的好好学学 ...
- dotnet core 使用 PowerShell 脚本
本文告诉大家如何在 dotnet core 通过 Host PowerShell 的方法使用 PowerShell 脚本 本文提供的方法需要在 dotnet core 2.1 和以上的版本,对于 do ...
- nodejs的nvm与.net的dnvm使用对比
一.vm安装命令 nodejs的nvm安装命令: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.s ...
- 国内免费CMS系统大全
一.ASP类的CMS程序 1.动易CMS 官方网址:http://www.powereasy.net/(可免费下载) 特点:完全免费,ACCESS数据库,主要功能模块:文章频道.下载频道.图片频道.留 ...