当前位置: 首页>后端>正文

丸子学CSS(学习一小时 - 定位、锚点、透明)

定位

1)静态定位 (static)

一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流

2)绝对定位 (absolute)

绝对定位的元素从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有设置定位属性,则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在上面,可以有负值

绝对定位的定位方法:

如果它的父元素设置了除static之外的定位,比如position:relative或position:absolute及position:fixed,那么它就会相对于它的父元素来定位,位置通过left , top ,right ,bottom属性来规定,如果它的父元素没有设置定位,那么就得看它父元素的父元素是否有设置定位,如果还是没有就继续向更高层的祖先元素类推,总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素,如果所有的祖先元素都没有以上三种定位中的其中一种定位,那么它就会相对于文档body来定位(并非相对于浏览器窗口,相对于窗口定位的是fixed)

丸子学CSS(学习一小时 - 定位、锚点、透明),第1张

3) 相对定位 (relative)

相对定位元素不可层叠,依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计

丸子学CSS(学习一小时 - 定位、锚点、透明),第2张

4)固定定位(fixed)

固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。
固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏,不需使用margin、border、padding


丸子学CSS(学习一小时 - 定位、锚点、透明),第3张

5)粘性定位 (sticky)

粘性定位,它是 relative 和 fixed 的结合体,能够实线类似吸附的效果,当滚动页面时它的效果与 relative 相同,当要滚动到屏幕之外时则会自动变成 fixed 的效果


丸子学CSS(学习一小时 - 定位、锚点、透明),第4张

锚点

命名锚点的作用:
在同一页面内的不同位置进行跳转。
实现锚标记

  1. 给元素定义命名锚记名 (语法:<标记 id="命名锚记名"> </标记>
  2. 命名锚记连接 (语法:<a href="#命名锚记名称"></a>
    丸子学CSS(学习一小时 - 定位、锚点、透明),第5张

透明

css透明有两种,分别是:

火狐/谷歌: opacity: 0.5
ie: filter: alpha(opacity =30)

丸子学CSS(学习一小时 - 定位、锚点、透明),第6张

https://www.xamrdz.com/backend/3jf1929052.html

相关文章: