HTML+CSS实战(二)——固定层效果
来源:互联网 发布:中国国产枪械水平 知乎 编辑:程序博客网 时间:2024/06/08 01:18
(一)、position定位
position属性,又称position定位,
1、有3种形式的定位:静态定位、相对定位、绝对定位。
2、影响因素: 1.属性的取值,2.元素偏移量,3.元素偏移参照基准
3、position属性四种取值:static–静态定位, relative–相对定位,absolute–绝对定位,fixed–固定定位。
4、绝对定位特点【absolute与fixed同属于绝对定位】:完全脱离标准文档流,兄弟元素不再受其影响
(二)、absolute与fixed的对比
一、absolute与fixed相同点:(都属于绝对定位形式)
1.完全脱离标准文档流
2.未设置偏移量时,都定位在父元素的左上角。
偏移量——元素设置定位(绝对或相对)后
就具有偏移属性和堆叠属性(z-index)
二、不同点:
设置偏移量时:absolute:1、无已定位祖先元素,以html为基准;2、有已定位祖先元素,以距其最近,已定位的祖先元素为基准。fixed:有无已定位祖先元素都以浏览器可视窗口为基准偏移。
表现形式(产生滚动条时):absolute:位置随滚动条变化;fixed:1、位置不随滚动条变化;2、被其遮盖的元素可从其下穿过。
(三)偏移量
什么时候该设置偏移量?
在对元素设置固定定位时,如果希望本元素包含起父包含块中,不需要对其设置偏移量。
{position: fixed;}没有设置偏移量的方向依然会保持在父包含块。
也就是说:
在其没有设置偏移量的时候,偏移量参数值默认为当前fixed的元素与浏览器可视窗口的偏移数值!
同理,对于{position: absolute;}的元素也是一个道理,没有设置的偏移量数值默认为当前其相对与最近的有{position: relative;}的祖先元素的偏移数值!
- HTML+CSS实战(二)——固定层效果
- CSS固定层的效果实现
- 滚动层固定效果
- 固定表头效果--Css
- HTML+CSS渐变效果—理发店彩带
- 20150726 固定层效果实现
- 固定层效果之position
- html css html底部固定
- 【Html】层模型--固定定位
- 【HTML+CSS+JavaScript】网页实战开发笔记之二—关于Web标准,你不能不知道的事
- HTML+CSS——初学笔记(二)
- 黑马程序员—HTML+CSS系列 (二)
- css 隐藏层效果
- 用CSS固定HTML表头
- HTML+CSS div固定布局
- html css实现左右两列固定宽度中间自适应效果
- HTML中 css实现滚动页面时固定页面其中一栏的效果
- HTML5+CSS3实战(二)——照片墙效果
- <LeetCode OJ> 337. House Robber III
- GitHub 项目主页
- Directory not found for option 在导入友盟SDK后
- vpn代码服务器的搭建(超级详细,可装 B)
- ava锁机制Synchronized方法简介
- HTML+CSS实战(二)——固定层效果
- 使用xshell使用删除出现乱码
- STL优先队列
- iOS app版本迭代(iOS中app在iTunes中更新版本流程)
- kettle获取系统信息及输出
- 将任意文件隐藏到一张图片内
- 移动前端开发之viewport的深入理解
- 如何用 Latex 写一个漂亮简历
- POJ 1423 求阶乘的位数