定位及背景属性

Posted 2022-08-12 fuyi2345

定位的属性
position
relative 相对定位
使用top left bottom， 可以实现相对位置的偏移

absolute 绝对定位
元素会脱离文档流
其实就是相对于body的定位
如果父级设置了定位属性 本元素会相对于父级进行定位

fixed 固定定位
不管父级有没有定位 都相对于浏览器窗口定位

inherit 继承 父级的定位属性

opacity ： 透明度 0.5 一般的透明度


定位的层级
默认后面写 会排在上面
z-index : 设置层级 数字越大 越在上面

悬浮菜单栏
用固定定位 可以实现悬浮菜单

相对于浏览器水平居中的悬浮浏览框

 

背景属性

 

背景属性
backgroud-color ：颜色

 

backgroud-image ：背景图片 url（图片地址）

 

backgroud-repeat ： 北极图片如何重复平铺
repeat-x ： 只重复x轴
repeat-y ： 只重复y轴
no-repeat ： 只平铺一次
repeat ： 平铺所有的

 

backgroud-position ：设置背景图片位置
left top ：左边的上面 默认
center center ：居中

水平 left center right
垂直 top center bottom
以此类推 共9种

10px 20px 按照右上为原点 +xpx 为位置

 

backgroud-attachment ： 设置背景图片是随页面滚动还是固定
fixed 固定

 

合并的写法为 ：
例 ： backgroud ： url（image/bg.jpg） -20px 10px no-repeat cyan；
图片 位置 平铺次数 颜色