position(static-relative-absolute-fixed),margin(top-right-bottom-left),top-right-bottom-left
最近写css遇到一些问题，所以准备写下来捋一下思路。
1.position=satic下看margin的使用。（top-right-bottom-left在这种case下无效）
1-1)margin
a,margin值为具体的px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid blue;
padding-left: 100px;/*设置父元素的padding为了明显子元素的包含块区域*/
background: darkgoldenrod;
}
.inner{
width: 200px;
height: 200px;
background: red;
margin-left: 100px;/*相对于包含块移动,static的包含块为父元素的content边界以内。准确说是相对于元素自身移动
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
</body>
</html>
结果如图，
b,margin值为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
border: 1px solid blue;
padding-left: 100px;
background: darkgoldenrod;
}
.inner{
width: 200px;
height: 200px;
background: red;
margin-left: 50%;
}
.half{
width: 500px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
margin仍然是相对于包含块移动（因为包含块包裹着子元素，准确来说是相对于子元素本身移动），移动的值是父元素的宽度的百分比（如，50%）,不是父元素这个盒子的宽度。
结果如下图，为了明显移动的情况，我在底部添加了一个宽度50%的div做对比。
2.position=relative.由于top和margin-top的百分比情况下容易导致问题，所以这里讨论时会同时看top和left两个边。
2-1）margin
a,margin值为具体px
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
border: 1px solid blue;
padding-left: 100px;
padding-top: 100px;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
margin-left: 100px;//relative元素的包含块也是父元素的content边界以内区域
margin-top: 100px;
}
/*.half{*/
/*width: 50%;*/
/*height: 100px;*/
/*background: yellow;*/
/*}*/
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<!--<div class="half"></div>-->
</body>
</html>
结果如图，margin依然是相对于包含块做移动。准确来说是相对于元素自身移动。
b,margin值为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
margin-left: 50%;
margin-top: 50%;//父元素height=width(400px)+padding-top(100px)=500px.marin-top相对于包含块使子元素向下移动margin-top(父元素宽度的50%，即400px)
}
.half{
width: 400px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图，margin依然是以包含块左上角为原点移动（准确说是元素自身），不过margin-left/margin-top的值均是父元素宽度的百分比（尤其需要注意margin-top也是相对于父元素的宽度而不是高度，同理padding）.不过也并不是绝对的，当设置了writing-mode为纵向书写时，比如-webkit-writing-mode: vertical-lr;此时按百分比书写的margin就会参照容器的高度来计算了
2-2）top-right-bottom-left
a,top和left为具体值（px）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
/*width: 800px;*/
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
top:400px;
left: 300px;
opacity: 0.3; }
.half{
width: 400px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图，注意这里为了显示明显，选的值都是比较特殊的。
top/left也是相对于包含块进行位移。
b,top和left为百分比
1）top/left值为百分比时，以包含块为参考进行移动，移动的值分别相对的是父元素的width和height（width和height指定的是父元素的content区域，即包含块），而不是父元素这个盒子。
2）top/bottom值为百分比时，需要保证父元素的height存在（具体的值或者设置了百分比），不然top/bottom就无效。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 800px;
/*height: 400px;*/ /*如果没有设置height，子元素的top就无效*/
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: darkgoldenrod;
}
.inner{
position: relative;
width: 200px;
height: 200px;
background: red;
left: 50%;
top:50%; /*因为父元素没设置高度，所以无效*/ }
.half{
width: 500px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如下,由于父元素没有现式设置高，则top:50%设置无效。
3.position=absolute.
absolute元素的包含块是最近的已定位祖先元素的padding边界以内区域。
3-1）margin
a.margin-top/margin-left为具体的值（px）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
/*height: 400px;*/
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 200px;
background: red;
margin-left: 100px;
margin-top: -100px;
}
.half{
width: 500px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<!--<div class="half"></div>-->
</body>
</html>
结果如图，margin相对于元素自身移动
b.margin-top/margin-left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
/*height: 400px;*/
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 200px;
background: red;
margin-left: 50%;
/*margin-top: -100px;*/
opacity: 0.3;
}
.half{
width: 550px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图，margin-top/margin-left值为百分比时，相对的是父元素的wdith+padding的百分比（即absolute元素的包含块---父元素的padding边界以内区域。上面我们测试static/relative元素时，相对的是父元素的width的百分比，即relative的包含块）。
同时margin-top/margin-bottom相对的是width+padding,而不是height+padding。
3-2）top-right-bottom-left
a.top/left为具体的值（px）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 250px;
background: red;
left:0px;
top:0px; }
.half{
width: 450px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<!--<div class="half"></div>-->
</body>
</html>
结果如图，top/left相对于包含块移动。
b.top/left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 800px;
height: 400px;
border: 1px solid blue;
padding-left: 100px;
padding-top:100px ;
background: rgba(0,0,255,0.3);
}
.inner{
position: absolute;
width: 200px;
height: 250px;
background: red;
top: 50%;/*移动了250px*/
/*left: 0;*/
left: 50%;/*移动了450px*/ }
.half{
width: 450px;
height: 150px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
</div>
</div>
<div class="half"></div>
</body>
</html>
结果如图，相对于包含块移动。移动的值是相对于父元素的width+padding或height+padding（包含块）的百分比。
4.position=fixed.
4-1）margin
a.margin-top/margin-left为具体的值（px）
与absolute一样，不重复了。
b.margin-top/margin-left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
border: 1px solid red;
width: 50%;
height: 200px;
}
div{
position: fixed;
width: 200px;
height: 100px;
background: darkviolet;
margin-left: 50%;
margin-top:200px;//这里使用百分比比较复杂，所以用具体的值。
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图，以元素自身为参考移动。值是相对于窗口大小viewport的百分比。
4-2）top-right-bottom-left
a.top/left为具体的值（px）
于absolute差不多，不重复了。
b.top/left为百分比
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 1px solid red;
width: 50%;
height: 200px;
}
div{
position: fixed;
width: 200px;
height: 100px;
background: darkviolet;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图，相对于包含块（窗口）移动，值是相对于窗口大小viewport的百分比。
总结几条：
1）static/relative的包含块是父级元素的content区域（width和height决定）。
static/relative元素的 margin-left/margin-top/margin-right/margin-bottom,以元素自身为参考移动，值为百分比时，指的是包含块（width）的百分比，margin-top/margin-bottom相对的也是width而不是height。
static元素的top/left/bottom/right.以包含块为参考移动，值为百分比时，指的是包含块（width或height）的百分比。
2）absolute元素的包含块是最近的已定位祖先元素的padding边框以内区域。
它的 margin-left/margin-top/margin-right/margin-bottom,以元素自身为参考移动，值为百分比时，指的是包 含块（width+padding）的百分比，margin-top/margin-bottom相对的也是width+padding而不是垂直方向的height+padding.
它的top/left/bottom/right.以包含块为参考移动，值为百分比时，指的是包含块（width+padding或height+padding）的百分比。
3）fixed的包含块为窗口，大小为viewport.
position(static-relative-absolute-fixed),margin(top-right-bottom-left),top-right-bottom-left的更多相关文章
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- What is the difference between position: static,relative,absolute,fixed
What is the difference between static,relative, absolute,fixed we can refer to this link: expand
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- css的定位，relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS之定位，relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- CSS 浅析position：relative/absolute定位方式
## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...
- 对于position:relative,absolute,fixed的见解:
1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...
- CSS定位：相对定位、绝对定位和固定定位（relative absolute fixed）
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
- CSS：static/relative/absolute
static - default and this is the FLOW. ------------------------------------------------------------- ...
随机推荐
- linux系统 硬链接和软链接
背景: 当几个用户同在一个项目里工作时.经常须要共享文件. 假设一个共享文件同一时候出如今属于不同用户的不同文件夹下.工作起来就非常方便. 比如B和C文件夹下有一文件D是两者都能够訪问和改动的共享文件 ...
- Lesson 1 Basic Concepts: Part 2
Getting your web site ‘live’ on the Web With the nerd background details under our belts, we can now ...
- nyoj--19--擅长排列的小明(dfs)
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难 ...
- Weka中数据挖掘与机器学习系列之为什么要写Weka这一系列学习笔记？（一）
本人正值科研之年,同时也在使用Weka来做相关数据挖掘和机器学习的论文工作. 为了记录自己的学习历程,也便于分享和带领入门的你们.废话不多说,直接上干货!
- OSSIM（开源安全信息管理系统）在企业网络管理中的应用
国内首个Ossim技术交流群(179084574),欢迎加入我们 参与51CTO[第242期]OSSIM,企业信息安全管理利器热门技术讨论 650) this.width=650;" bor ...
- Ionic2集成ngx-datatable,ng2-tree第三方控件.md
1. 基本环境配置 1.1. 命令安装相应的依赖 1.2. 在Module定义中引入对应Module 1.3. 引入对应的CSS 2. 简单使用示例验证是否集成成功 2.1. ngx-datatabl ...
- 创建一个基于ViSP的图片显示程序
创建一个图片读取,并在windows下窗口显示的程序. #include <visp/vpDisplayD3D.h> #include <visp/vpDisplayGDI.h> ...
- 洛谷 P2117 小Z的矩阵
P2117 小Z的矩阵 题目描述 小Z最近迷上了矩阵,他定义了一个对于一种特殊矩阵的特征函数G.对于N*N的矩阵A,A的所有元素均为0或1,则G(A)等于所有A[i][j]*A[j][i]的和对2取余 ...
- 【hiho39】二分·归并排序之逆序对
近期申请了微软的暑假实习,4号就要在线笔试了,在线測试系统用的是http://hihocoder.com/,今天试手做了一道题. [题目] 原题链接:http://hihocoder.com/cont ...
- 使用Linux遇到的一些问题和解决方案
1.如何在重装系统或换机器以后继续使用以前用过的thunderbird邮件 执行命令thunderbird -ProfileManager以后会打开一个配置用户界面. 在里面添加一个新的配置,然后选择 ...