position定位问题
position属性规定了元素的定位类型，默认为static。
该属性还可以有下值：
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
inherit：规定应该从父元素继承 position 属性的值。
<style>
body{
height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
}
.test-div{
position:fixed;
left:50px;
top:50px
}
.out-div{
width: 300px;
height: 300px;
background: purple; /*这里定义个背景，让我们知道这个div在哪*/
margin:50px 0px 0px 50px;
position: relative
}
.in-div{
position:absolute;
left:50px;
top:50px
}
</style>
<body>
<div class="test-div">Hello World</div>
<div class="out-div">
<div class="in-div">Hello World</div>
</div>
</body>
position定位问题的更多相关文章
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- 解决IE6下固定定位问题 使用position:fixed
IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- IOS7 position:fixed 定位问题
在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变.参见该页面详细描述(http://www.cnblogs.com/zhangdaipin ...
- CSS中margin和position:relative的定位问题
一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- CSS position: absolute、relative定位问题详解
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...
- ie6下position:fixed定位问题
1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...
- 解决 IE6 position:fixed 固定定位问题
#e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:expression(eval(d ...
- 完美解决 IE6 position:fixed 固定定位问题
关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...
随机推荐
- simplified build configuration
http://blogs.msdn.com/b/saraford/archive/2005/08/16/452411.aspx Did you know… That you can hide the ...
- Standard Attachments in Oracle Form 标准附件
Standard Attachments in Oracle Form 默认情况下"附件"按钮是灰色的,本文将展示如何让某个Form的附件按钮变亮,并能上传附件. 以用户Form为 ...
- Eclipse开发Java EE应用
设置Web服务器 添加Web服务器 以上两步可以直接由下面这步完成: or 创建Web工程 建立JSP文件供测试 发布Java Web工程 方法1:在下方Server中添加 方法2:右击左边项目导航树 ...
- bzoj2259
这道题很不错,首先读入方式有一种跳跃的既视感:读入Si之后,我们可以直接往后跳Si,可以想到最短路,设序列为a[],我们设n+1是终点如果i+a[i]<=n+1 那么i-->i+a[i] ...
- WordPress Suco Themes ‘themify-ajax.php’任意文件上传漏洞
漏洞名称: WordPress Suco Themes ‘themify-ajax.php’任意文件上传漏洞 CNNVD编号: CNNVD-201311-403 发布时间: 2013-11-28 更新 ...
- BZOJ2843: 极地旅行社
2843: 极地旅行社 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 90 Solved: 56[Submit][Status] Descripti ...
- Charles使用问题, iOS7的http代理(http proxy)配置不生效问题
Charles配合iOS7使用时, 发现iOS7的http代理(http proxy)配置不生效, 代理信息写完后, 系统没有自动保存. 解决方法: 将些wifi忽略, 重新连接, 再配置代理就好了.
- .net HTMLParser详细使用说明 强大的Filter类 解析HTML文档如此简单
背景: HTMLParser原本是一个在sourceforge上的一个Java开源项目,使用这个Java类库可以用来线性地或嵌套地解析HTML文本.他的 功能强大和开源等特性吸引了大量Web信息提取的 ...
- 分割函数和根据Id串返回名字
需求:函数传入一个字符串参数 例如 123-456 将这个字符串123-456拆成两个值 123 456,在通过两个值分别查出数据(例如 张三 李四),拼接成 张三-李四 --声明变量 ...
- Windows Azure中对映像的管理及操作
映像是用作新虚拟机的创建模板的 .vhd 文件.映像是一个模板,因为它与已配置的虚拟机不同,没有计算机名称和用户帐户设置等特定设置.可以通过 Windows Azure 管理门户使用现有映像,或创建您 ...