1.定位position：relative || absolute || fixed生成绝对定位的元素，相对于浏览器窗口进行定位。|| inherit

（1）属性解释

①````position：relative 相对定位，写在父级标签，此时的绝对定位就是相对于父级标签 (处于正常文档流中通过left，right，bottom，top,控制元素的移动后写的元素覆盖先写元素属性，有层级概，相对于正常的文档流，原来占据的空间不会改变，通常配合着绝对定位使用)

②·····position：absolute 绝对定位，相对于相对定位来定位 (处于脱离正常文档流，没有高度，有层级的概念(必须设置top等，楼上一样)，后写元素覆盖先写元素，当前可视窗口定位，相对于父级元素带有定位属性的文档流，不会占据空间高度为0)

③‘’‘’ position：fixed 生成绝对定位，相对于浏览器窗口进行定位 (脱离正常的文档流，在窗口进行移动定位，层级概念，background:中的fixed固定不动,任何元素对固定定位是没有用的)

④‘’‘’ position：inherit 从父级元素继承定位

(2)注意事项

①z-index只能与定位属性配合使用，正常文档流无法使用 z-index:1~9999,设置显示优先级别，默认都为一，后面的覆盖在前面属性的上面

②重点:

absolute同时设置left，right,top,bottom遵循以下原则
如果top和bottom一同存在的话，那么只有top生效。
如果left和right一同存在的话，那么只有left生效。

2.margin注意事项

（1）注意事项:当通过background直接设置背景图片，再设置当前属性hover时，需要设置background-color属性，不然会使图片背景也被覆盖详细请见面

演示如下:

①首先是带有background-color属性(正确)

②ui 效果图

①带有background属性(错误)

②ui 效果图

①②③④⑤⑥⑦⑧

转载于:https://www.cnblogs.com/520Girl/p/9992300.html

css 定位position详解,background注意事项哒哒哒 -----20181119相关推荐

CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位. 今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在C ...
css定位属性详解（position属性）
一.定位属性 1.定位属性属性:position 取值: 1.static ...
CSS中的定位(position)详解
将学过的定位进行一个简单的整理,方便以后查阅,也想向大家分享一下. 众所周知,定位分为5种,分别为:静态定位.相对定位.绝对定位.固定定位.粘性定位.下面我为大家详细介绍一下每种定位. 1.静态定位( ...
html定位的所有属性,HTML CSS定位属性详解嘿嘿嘿
定位属性:Position 作用:检索或者设置元素的定位方式"(改变元素位置) 定位的步骤: 1.给元素添加position属性证明该元素要做位置变 2.确定参照物!(通过position ...
CSS之Position详解
CSS的很多其他属性大多容易理解,比如字体,文本,背景等.有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑.CSS中主要难以理解的属性包括盒型结 ...
定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
CSS中position详解
一些关于定位和叠加的理解一.position属性 position有5个值,分别为static,relative,absolute,fixed,sticky. 1.1 static static是p ...
CSS margin属性详解
CSS margin属性详解我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...

css 定位position详解,background注意事项哒哒哒 -----20181119

1.定位position：relative || absolute || fixed生成绝对定位的元素，相对于浏览器窗口进行定位。|| inherit

（1）属性解释

(2)注意事项

2.margin注意事项

①首先是带有background-color属性(正确)

css 定位position详解,background注意事项哒哒哒 -----20181119相关推荐

最新文章

热门文章

css 定位position详解,background注意事项 哒哒哒 -----20181119

1.定位position：relative || absolute || fixed生成绝对定位的元素，相对于浏览器窗口进行定位。|| inherit

（1）属性解释

(2)注意事项

2.margin注意事项

①首先是带有background-color属性(正确)

css 定位position详解,background注意事项 哒哒哒 -----20181119相关推荐

最新文章

热门文章

css 定位position详解,background注意事项哒哒哒 -----20181119

css 定位position详解,background注意事项哒哒哒 -----20181119相关推荐