css中关于position属性的探究(原创)
- static:默认属性。指定元素按照常规的文档内容刘(从左到右,从上到下)进行定位。
- absolute:独立定位,它的定位要么是相对于最近的定位祖先元素,要么是相对于文档本身。
- fixed:该值指定元素是相对于浏览器窗口进行定位的。不会随着文档其他部分而滚动。
- relative:元素按照常规文档流进行布局,它的定位相对于文档流中的位置进行调整。
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#father{
width:300px;
height:300px;
#child1{
width:100px;
height:100px;
#child2{
width:100px;
height:100px;
background:yellow;
}
#cousin{
width:100px;
height:100px;
</style>
</head>
<body>
<div id="father">
<div id="child1">child1</div>
<div id="child2">child2</div>
</div>
<div id="cousin">cousin</div>
</body>
</html>


width:300px;
height:300px;
background:black;
position:fixed;
top:100px;
left:100px;
width:100px;
height:2000px;

.png)
width:100px;
height:100px;
background:blue;
position:relative;
top:100px;
left:100px;
.png)

width:300px;
height:300px;
background:black;
position:relative;
top:100px;
left:100px;
}
.png)

width:300px;
height:300px;
background:black;
position:absolute;
top:100px;
left:100px;
.png)

width:100px;
height:100px;
background:green;
position:absolute;
top:100px;
left:100px;
.png)

width:100px;
height:100px;
background:green;
position:relative;
top:100px;
left:100px;

width:300px;
height:300px;
background:black;
position:relative;
top:100px;
left:100px;
.png)

- static就是默认设定,此时top,left,right,buttom无效,不再阐述
- fixed就是相对于浏览器窗口来进行定位,就像有些网站上固定在窗口中,挥之不去的小广告,跟着你走
- relative不会使得元素脱离文档流,元素仍然在原来的位置占有空间,而显示出来是偏离的位置,同时,如果父元素是relative或者absolute的话,就相对于父元素进行偏离
- absolute会使得元素脱离文档流,类似于flow浮动,同样,如果父元素是relative或者absolute的话,就相对于父元素进行偏离
- 注意所有元素的位置定位都是根据在文档流中原来的位置,而非top,left,right,buttom等设定后显示出来的位置,切记切记。
css中关于position属性的探究(原创)的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
随机推荐
- 如何使用matplotlib绘制一个函数的图像
我们经常会遇到这种情况,有一个数学函数,我们希望了解他的图像,这个时候使用python 的matplotlib就可以帮助我们. 用sigmoid函数来举个例子. sigmoid函数: 代码: impo ...
- Java基础知识系列——文件操作
对文件进行操作在编程中比较少用,但是我最近有一个任务需要用到对文件操作. 对文件有如下操作形式: 1.创建新的文件(夹) File fileName = new File("C:/myfil ...
- JSP中的 HttpSession、pageContext对象
pageContext 隐含对象对应javax.servlet.jsp.PageContext,都自动的被加入至pageContext中, 您可以由它来取得与JSP相关的对应之Servlet对象,像是 ...
- Hdu OJ 5965 扫雷(递推)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5965 题目大意:中文题,自己读 解图思路:对于每一列都有三种情况--0, 1, 2. 如果第一列确定地 ...
- notepad++的CoolFormat代码格式化插件使用
因为notepad++的NppAStyle插件只支持格式化C.C++.C#.Java这四种编程语言的代码,所以本人推荐使用这个CoolFormat的插件,相比于NPPAStyle,CoolFormat ...
- android:ems的作用
android:ems用来设置EditText或TextView显示的字符宽度. 比如:android:ems="10" 设置TextView或EditText为10个字符的宽度, ...
- UiAutomator自动化测试框架介绍
UiAutomator自动化测试框架介绍 环境搭建 1 必要条件 1.1 JDK 1.2 SDK(API高于15) 1.3 Eclipse 2 ...
- 【转】Linux学习之路--启动VNC服务
我的Linux是Fedora 13,安装方法如下: 1.打开终端,执行 # yum install -y tigervnc tigervnc-server 2.编辑/etc/sysconfi/vncs ...
- Eclipse中调试Android技巧
Android eclipse中程序调试 一:断点调试 用eclipse开发android程序的时,跟VS一样是可以断点单步调试的. 步骤如下. 1 设置断点:在编码窗体的左边框上用鼠标双击,或者右键 ...
- 在windows下面配置redis集群遇到的一些坑
最近工作不忙,就决定学习一下redis.因为一直在windows下工作,不会linux,没办法就选择在windows下配置redis. windows下配置redis集群的文章有很多,比如:http: ...