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 ...
随机推荐
- 转载：CEO应向软件工程师学习的7个技能
软件工程师的哪些技能是值得CEO学习的?显然,软件工程师是逻辑的,高效的,注重细节的,有计划的,并且大多数CEO也是如此.但是,软件工程师还有一些更微妙,甚至是令人懊恼的品质,那么CEO是否可以从中学 ...
- phpcms v9会员中心文件上传漏洞
漏洞版本: phpcms v9 漏洞描述: PHPCMS V9采用OOP(面向对象)方式自主开发的框架.框架易扩展,稳定且具有超强大负载能力. phpcms v9会员中心上传头像处可未经过充分过滤,攻 ...
- linux下的X server:linux图形界面原理
linux下的X server:linux图形界面原理 Moblin Core是在Gnome Mobile的平台上建立.我以前玩Linux,提交的都和图像没有关系,连Xwindows都不用启动,开 ...
- [swustoj 764] 校门外的树 Plus Plus
校门外的树 Plus Plus(0764) 问题描述 西南某科技大学的校门外长度为 L 的公路上有一排树,每两棵相邻的树之间的间隔都是 1 米.我们可以把马路看成一个数轴,马路的一端在数轴 1 的位置 ...
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...
- ruby编程语言-学习笔记4（第4章 表达式和操作符）
4.6.9 范围 Flip-Flops: ..和... ..和... 操作符不是基于方法的,无法重定义.(优先级比较低) x+1 .. x*x #可以认为是x+1 至 x*x 的范围 因为操作 ...
- Mathtype常用快捷键
1. 打开/关闭MathType窗口 alt+ctrl+q:插入inline公式 可在word中设置快捷键,直接调用公式编辑器,工具--〉自定义--〉键盘,选择 插入--insertequation ...
- chmod chgrp chown
Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...
- HIVE中查询FAILED: Error in metadata: javax.jdo.JDOFatalDataStoreException: Communications link failure
有一天早上到公司用hive中查询数据,发现报错不能连接.通过检查发现mysql服务器没有启动,开启mysql服务器后查询正常.
- HDU1671 - Phone List(Trie树)
题目大意 给定一些电话号码,判断是否有电话号码是其他电话号码的前缀 题解 裸Trie树嘛~~~~只需要一个插入过程即可,假设X是Y的前缀,在插入的过程中有两种情况,X在Y之前插入,那么在插入Y的时候经 ...