html定位总结
来源:互联网 发布:mac的numbers使用教程 编辑:程序博客网 时间:2024/05/22 10:23
定位
1、 相对定位
(1)特点
a、不影响元素本身的特性;
b、不使元素脱离文档流(元素移动之后原始位置会被保留);
c、如果没有定位偏移量,对元素本身没有任何影响;
d、提升层级
(2)相对定位的代码:先设置position为relative,再设置right/left/top/bottom的偏移量
2、 绝对定位
(1)特点
a、使元素脱离文档流
b、提升层级
c、如果父级元素有相对定位的,以父级元素为基准进行定位。否则以浏览器窗口为基准进行定位。
例如:
当div2设置为absolute时,div3会移动到div2的位置。又因为div2的层级被提升,div2会遮挡div3。
因为现在div的父级元素是body,body并没有设置为relative,这时定位的基准是浏览器窗口。而body在浏览器的margin为8px,所以设置div2向左移动200px会遮挡住div3宽度为8px的区域。
解决问题的办法有:把body的margin设置为0px或者把body设置为position:relative。
把body的margin设置为0px,所有元素都紧贴在浏览器窗口
body设置为position:relative,div相对于body定位
3、 固定定位:就是固定在页面的某个位置,不随滚动条的移动而移动。
布局例子:透明重叠块
z-index:数值高的在上面
透明色设置:opacity:0-1,0为完全透明,1为完全不透明
IE下面为filter:alpha(opacity=0-100),0为完全透明,100为完全不透明
布局思路:设置一个父窗口为relative,然后子窗口就相对于父窗口偏移一点点。设置z-index的值让决定哪个窗口在下面。设置在下面的窗口的透明值。
- html定位总结
- HTML元素分类、定位简单总结
- html 定位
- html定位
- html定位
- HTML定位
- html 页面内锚点定位及跳转方法总结
- html 页面内锚点定位及跳转方法总结
- html 页面内锚点定位及跳转方法总结
- html 页面内锚点定位及跳转方法总结
- 【转】html 页面内锚点定位及跳转方法总结
- 《定位》总结
- 定位总结
- Html obj定位
- HTML精确定位
- HTML&CSS 定位
- HTML元素定位
- html 锚点定位
- 2、创建工程
- C语言的优点和缺点
- 【Boost】boost库中thread多线程详解1——thread入门与简介
- 使用jqgrid从后台获取List后得到list的json字符串
- Python正则表达式
- html定位总结
- maven eclipse web项目 && 打war包
- DrawerLayout的基本用法
- mssql的"[]" 标识符的问题
- 知识片段---label行间距设置
- FTP上传简单示意
- Java EE7和Maven工程入门(1)
- PL/SQL编辑数据"这些查询结果不可更新,请包括ROWID或使用SELECT...FOR UPDATE获得可更新结果"处理
- YTU 2800: 逗逗泡泡的保密电文