CSS之 absoulte 属性

news/2024/5/17 12:38:55

特性:

  absoulte 与 float 具有相同的特性:包裹性,与破坏性
  absoulte 与 float 可以交替使用
  不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/right/top/button/auto 等属性

行为表现

  脱离文档流
  去浮动( float absoulte 元素不能同时出现)
  位置跟随(还在原来的位置)
  问题: IE7使用 absoulte 的元素永远是 inline-block 元素
  解决: 外层套一层无设置属性的标签

可以配合margin 精确定位

  支持负值定位
  兼容性强 IE6
  自适应强,维护性好,具有健壮性

  动画尽量作用与绝对定位元素上,多个 absoulte 元素会重叠,后者居上

z-index 无依赖

  如只有一个 absoulte 元素,不需要设置
  如两个 absoulte 元素,控制DOM流的顺序,也可不需要
  多个定位交错, z-index: 1 控制
  非弹框类的 absoulte 元素, z-index <= 2 若冗余,需优化

left/right/top/bottom与width/height可相互替代

left:0;right:0;    等于 width:100%;
top:0;bottom:0;    等于 height:100%;
以上IE7 支持
具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中

absoulte整体布局

<header></header>
<article>
   <aside></aside>
   <main></main>
</article>
<footer></footer> 
1 header,footer{ positon:absoulte; left:0; right:0; }
2 header{ height: 50px; top: 0; }
3 footer{ height: 20px; bottom: 0; }
4 aside{ position: absoulte width: 200px; top: 0; bottom: 0; left:0; }
5 main{ position: absoulte; top: 50px; bottom: 50px; right: 0; left: 200px; overflow: auto;}

http://www.niftyadmin.cn/n/1733078.html

相关文章

海康威视SDK控制台程序consoleDemo

陈拓 2021/08/10-2020/08/10 1. 下载海康威视SDK 见《海康威视SDK实例QtDemo显示NVR视频窗口(LinuxQt)》 https://zhuanlan.zhihu.com/p/395178052 https://blog.csdn.net/chentuo2000/article/details/119299045 2. 开发环境 我的开发环境&#xff1a;PC机(Win10)工控机(…

Opera鼠标左键拖曳在后台打开链接和双击关闭标签的解决方法

1 鼠标左键拖曳在后台打开链接和双击关闭标签的解决方法★鼠标左键拖曳在后台打开链接Opera:config#Enable Drag填入数值“255”Opera:config#New Window勾选“Open New Window in Background”和“New Window” ★鼠标左键双击关闭标签Opera:config#Doubleclick to Close Tab勾…

css3动画之圆形运动轨迹

css3中通过keyframes定义动画&#xff0c;animation设置动画属性&#xff0c;从而实现动画效果&#xff1b; 在animation属性当中&#xff0c;可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。 animation animation作为一个复合属性&am…

海康威视SDK控制台程序consoleDemo获取视频通道参数

陈拓 2021/08/27-2020/08/27 1. 概述 在《海康威视SDK控制台程序consoleDemo》 https://zhuanlan.zhihu.com/p/403903892 https://blog.csdn.net/chentuo2000/article/details/119939573 一文中我们已经编译成功了海康威视SDK的控制台程序consoleDemo。在上文的基础上本文…

安装win7后鼠标一卡一卡

安装win7后鼠标一卡一卡的2009年11月01日 星期日 下午 02:04SL 400 AQC 安装win7后鼠标一卡一卡的win7 鼠标一卡一卡的解决办法winR打开运行窗口&#xff0c;输入services.msc&#xff0c;然后找到windows search服务&#xff0c;把它停掉

海康威视SDK控制台程序consoleDemo获取码流

陈拓 2021/08/28-2020/08/28 1. 概述 在《海康威视SDK控制台程序consoleDemo》 https://zhuanlan.zhihu.com/p/403903892 https://blog.csdn.net/chentuo2000/article/details/119939573 一文中我们已经编译成功了海康威视SDK的控制台程序consoleDemo。 在《海康威视SDK控…

box-shadow的应用技巧

一、box-shadow的参数解析 box-shadow:none; box-shadow: h-shadow v-shadow blur spread color inset; box-shadow参数解析 值描述none默认值&#xff0c;元素没有任何阴影效果。h-shadow阴影水平偏移量&#xff0c;其值可以是正负值。如果取正值&#xff0c;则阴影在元素的右…

jQuery对象与dom对象的转换

http://www.ccvita.com/192.html最近在闲暇时间用jQuery搞了一个多文件上传的东东&#xff0c;顺便写点笔记。 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的&#xff0c;开始的时候不理解&#xff0c;现在此案知道&#xff0c;原来jQuery 获得的…