博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第八章博客
阅读量:5299 次
发布时间:2019-06-14

本文共 765 字,大约阅读时间需要 2 分钟。

一.定位网页元素

position :
1.static :默认值,代表没有定位,元素没有定位会以标准文档流方式展现出来
2.relative :相对定位,元素以自身原来位置进行定位(如果设置元素浮动,那么会以浮动后的位置作为原来的位置)
规律:
设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
3.absolute :绝对定位,元素以离他最近的已经定位的祖先元素进行定位,如果没有祖先元素定位,那么会以浏览器窗口进行定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后,它原来的位置不会被保留下来
4.fixed :基于浏览器窗口进行定位,不会随着滚动条的移动而改变位置
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
元素偏移方向:
如果想让元素向上移动,那么top属性写赋值,或者bottom属性写正值
如果想让元素向下移动,那么bottom属性写赋值,或者top属性写正值
如果想让元素向左移动,那么left属性写赋值,或者right属性写正值
如果想让元素向右移动,那么right属性写赋值,或者left属性写正值
二.设置定位元素的层叠
z-index:默认为0 值越大层级越上
opacity :0-1 值越小越透明
filter:alpha(opacity=x):0-100 值越小越透明

转载于:https://www.cnblogs.com/ringqq/p/9934738.html

你可能感兴趣的文章
android操作sdcard中的多媒体文件(二)——音乐列表的更新
查看>>
vector使用方法 ...
查看>>
JavaScript-10(JavaScript事件)
查看>>
网络编程 -- RPC实现原理 -- NIO单线程
查看>>
Java Annotation 应用 -- 导出Excel表格
查看>>
JavaScript 动态显示当前时间
查看>>
常用的 Http ContentType 对照表
查看>>
DVD系统
查看>>
5.11题解 导弹拦截
查看>>
论三星输入法的好坏
查看>>
Linux 终端连接工具 XShell v6.0.01 企业便携版
查看>>
数据库体系
查看>>
JS写一个简单日历
查看>>
LCA的两种求法
查看>>
Python排序算法(四)——插入排序
查看>>
oo第三单元博客作业
查看>>
Jquery---定时器(实现页面内定时弹出广告,定时退出)
查看>>
day11-闭包函数和装饰器
查看>>
VSCode常用快捷键与流行插件
查看>>
Aprior算法
查看>>