标签：定位 top 元素 透明度 几种 文档 取值 CSS left
定位的作用
普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）
定位的实现
使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置
定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位
边偏移定位元素的位置，使用“top”、“right”、“bottom”和“left”来描述。
-
边偏移属性
left：设置元素的左侧 距离参考点的左侧 距离 right：设置元素的 右侧 距离参考点右侧 距离 top：设置元素的 顶部 距离参考点 顶部的 距离 bottom：设置元素元素 底部 距离 参考点底部的 距离
-
取值
-
长度值：px/em等
-
百分比：相对于包含块计算
-
auto 默认值
-
允许使用负值
-
注：
通常水平位置通过left或right控制，垂直位置通过top或bottom控制
非定位元素设置此属性无效定位模式详解
postion:relative相对对定位
相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变。
偏移的参考位置： 相对于 原来的的位置 进行偏移
基础特性
-
不脱离文档流
-
提升元素层级
-
不定义偏移量时对元素基本没有影响
应用场景
通常作为定位父级配合绝对定位使用
postion:absolute绝对定位
没有定位父级时 相对于html进行定位，有定位父级时相对于最近的定位父级进行定位
以有定位属性的父元素为参考进行偏移，如果父元素没有定位属性，继续向上一级找有定位属性的先辈元素，如果都没有，找到html进行偏移
基础特性
-
脱离文档流
-
提升元素层级
应用场景：
通常配合绝对定位使用（父相子绝），如焦点图中的分页，翻页，视频网站中的 vip标签等
postion:fixed 固定定位
始终相对于浏览器窗口定位。即使窗口是滚动的它也不会移动：
基础特性总结
-
脱离文档流
-
提升元素层级
应用场景：
相对于窗口定位的元素 如弹窗、跟随滚动的导航、侧边栏
postion:static静态定位
表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
-
常用于重置 定位属性
-
静态定位的元素不会受到 top, bottom, left, right影响。
定位元素的层级顺序
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个定位元素的堆叠顺序（哪个元素应该放在前面，或后面）
-
取值
-
auto(默认值) 堆叠顺序与父元素相等
-
不带单位的数字：值越大显示越靠上
-
-
总结
-
普通层，浮动层，定位层覆盖关系总结
-
普通层：结构靠后的覆盖靠前的，子元素覆盖父元素
-
浮动层：浮动层覆盖普通层，浮动层之间同上
-
定位层：定位层高于普通和浮动层 【定位层之间默认是同上，也可以通过z-index调整覆盖关系】
-
-
实现盒子水平垂直居中的方法
方法一：
-
实现思路：margin负值配合定位的百分比
-
给需要居中元素设置定位
-
left:50%
-
top:50%
-
margin-left: -当前元素宽度的一般
-
margin-top: -当前元素高度的一半
-
方法二：
-
实现思路：left,right,top,bottom并用，配合margin：auto;
如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。
-
注意：ie7及以下浏览器不兼容
定位对元素的影响
-
相对定位基本不改变元素本身的特性
-
绝对、固定定位
-
脱离文档流
-
提升元素层级
-
未定宽度的块元素适应内容
-
使行内元素生成块级框
-
-
注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置。
CSS 透明
rgba()
-
语法： rgba(r,g,b,a)， 说明：r表示red,g表示green,b表示blue,a表示alpha透明度
-
取值: r,g,b取值范围 0-255 a透明度，取值0-1
-
使用说明：
设置颜色的不透明度， [一般用于调整background-color、color、box-shadow等的不透明度】
-
兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持
opacity
-
语法： opacity:0.5:
-
【取值：0-1】 0表示全透明，1表示全不透明，0-1之间表示半透明
-
使用说明：
设置opacity元素的所有后代元素会随着一起具有透明性， 【一般用于调整图片或者模块的整体不透明度】
-
兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持
补充了解：IE专属滤镜
-
语法： filter:alpha(opacity=数字)
-
取值：
数字取值0-100
0表示全透明，100表示全不透明，0-100之间表示半透明
-
兼容性：仅支持IE6、7、8、9，在IE10版本被废除
-
注意：在IE6、7、8中，设置了filter:Alpha的元素，子元素设置为【相对定位】，可以让子元素不透明
-
思维导图
标签：定位,top,元素,透明度,几种,文档,取值,CSS,left 来源： https://blog.csdn.net/qq_48469083/article/details/118974003
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。