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 ...
随机推荐
- 【HDOJ】1016 Prime Ring Problem
经典DP,写的可能麻烦了一些. #include <stdio.h> #define false 0 #define true 1 ]; ]; ]; void DFS(int, int, ...
- WCF - Architecture
WCF - Architecture WCF has a layered architecture that offers ample support for developing various d ...
- c程序设计语言_习题1-11_学习单元测试，自己生成测试输入文件
How would you test the word count program? What kinds of input are most likely to uncover bugs if th ...
- 全世界只有我们Erlang程序员是正确的
http://www.aqee.net/erlang-solving-the-wrong-problem/ 对某些程序来说是的,但对大多数程序来说不是.对大多数程序来说24个CPU中只有一个被利用.C ...
- 两个结构体ifconf和ifreq
用ioctl获得本地ip地址时要用到两个结构体ifconf和ifreq,它们对于大多数人来说都是比较陌生的,这里给大家一种比较简单的理解方法,当然只一种帮助理解的方法,在描述中可能会有一些地方与真实定 ...
- [Tommas] UNION 和 UNION ALL 的区别
UNION指令的目的是将两个 SQL 语句的结果合并起来.从这个角度来看,UNION跟 JOIN 有些许类似,因为这两个指令都可以由多个表格中撷取资料.UNION的一个限制是两个 SQL 语句所产生的 ...
- uDig介绍
一 安装配置Java平台此步骤不必多说,如果您是Java开发者可以跳过.如果您的机器上没有Java平台,那么请到http://java.sun.com下载jdk,当下最新的版本是1.6.安装jdk,请 ...
- Gtk中的文本视图（GtkTexViewWidget）
Gtk中的文本视图(GtkTexViewWidget) Gtk中的文本视图(GtkTexView Widget) 在本章的Gtk+程序设计教程中,我们将重点介绍 GtkTexView 构件. GtkT ...
- 多控制器之UIWindow
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Python安装、配置
1.Python简介:Python在Linux.windows.Mac os等操作系统下都有相应的版本,不管在什么操作系统下,它都能够正常工作.除非使用平台相关功能,或特定平台的程序库,否则可以跨平台 ...