css position[转
2.详细展示
2.1 position:absolute
2.2.1 说明:
绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
2.2.2 视图:
2.2 position:relative
2.2.1 说明
相对定位;脱离文档流的布局,但还在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
2.2.2 视图
2.3 position:fixed
2.3.1 说明
固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
2.3.2 视图
2.3.3 应用场景
①登录框覆盖层:如dz论坛的登录。
②虚假QQ消息广告。
2.4 position:static
2.4.1 说明
无定位,表示此元素为默认定位方式。
2.4.2 应用场景
IE6的特殊处理。
3.总结
3.1 滚动条是否出现
当含有position属性的元素为最边缘元素时:
①absolute 和 relative :含有此2个值的边缘元素,浏览器缩小到此元素不可见时,会出现滚动条。
②fixed :含有此值的边缘元素,浏览器缩小到此元素不可见时,不会出现滚动条。
3.2 示例
3.2.1 视图
http://www.cnblogs.com/polk6/p/3214847.html
css position[转的更多相关文章
- css position的使用
css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS position &居中(水平,垂直)
css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- 前端开发必知必会:CSS Position 全解析
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- jquery 获取css position的值
jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...
随机推荐
- shell反弹总结
NC反弹 常用的命令: -l 监听模式 -n 指定数字的IP地址 -p port(本地端口) -s addr 本地源地址 -v 详细输出 -i secs 延时的间隔 -e filename ...
- Nginx PHP支持
Nginx 支持 PHP server { server_name www.www1.com www1.com; location / { index index.php index.html; ro ...
- [C++]数组与指针(纯代码-复习用)
#include<iostream> #include<cmath> //C++ //#include<math.h> //C #include<ctime& ...
- 8、判断三角形ABC中是否有点D
思路: 首先连接AD,BD,CD,SABC为三角形的面积,SABD为三角形ABD的面积,SACD....,SBCD....... 因此,若D在三角形则SABC = SABD + SACD + SBCD ...
- Keil MDK忽略警告:文件末尾空白行警告
使用Keil MDK调试程序的时候,没有习惯在每个文件的末尾增加一个空白行,结果文件一多,编译时产生的警告就一大堆,排错都得用滚轮滚好久,就一个空白行还得出警告,烦死了,烦死了,烦死了!实在受不了了, ...
- java删除文件及其目录
1.删除指定文件路径 public @ResponseBody String deleteFiles(HttpServletRequest request) { log.info(this.getCl ...
- ubuntu 14.04 安装 OpenCV -2.4.13
1. 安装 (1) 更新软件源 sudo apt-get update sudo apt-get upgrade (2)删除以前安装的 FFMPEG 和 x264 库: sudo apt-get re ...
- ubuntu14.04 提示 卷 文件系统根目录 仅剩余xxx的硬盘空间
- C语言函数调用栈(一)
程序的执行过程可看作连续的函数调用.当一个函数执行完毕时,程序要回到调用指令的下一条指令(紧接call指令)处继续执行.函数调用过程通常使用堆栈实现,每个用户态进程对应一个调用栈结构(call sta ...
- python位运算之计算中位数
# -*- coding: utf-8 -*- # @Time : 2018/11/23 10:49 PM # @Author : cxa # @File : 1.py # @Software: Py ...