0813 relative

<style type="text/css">
*
{
 margin:0px;
 padding:0px;}
#a{
 width:100px;
 height:100px;
 top:50px;
 left:40px;
 background-color:#0F0;
 position:relative;}
/*absolute:当使用时，表示在文档流中没有实际存在位置（浮动），在不设置任何方位值时，只能按兵不动，当设置了方位值之后，会紧接着去寻找距离最近的能够将它包含住的父级元素，然后进行定位。*/

/*relative:当使用时，表示在文档中确实占有一定的空间，在不设置任何方位值时，会出现在应该出现的位置（空间），当设置了方位值之后，会在应该出现的位置上进行上、下、左、右的形状位移，而实际上还是占有应该占有的位置（空间）*/
#b{
 width:100px;
 height:100px;
 background-color:#FF0;
 position:relative;
 }
</style>

</head>

<body>123456789
<div id="a"></div>
12345678912345678912345678912345678912<br />
345678912345678912345678912345678912345<br />
678912345678912345678912345678912345678<br />
9123456789123456789123456789123456789
<div id="b"></div>

</body>

练习

<style>
*{
 margin:0px;
 padding:0px;}
.a{
 width:10%;
 height:600px;
 position:fixed;}
.aa{
 width:100%;
 height:60px;
 line-height:80px;
 position:relative;
 }
.b{
 width:90%;
 height:860px; 
 margin-left:10%;
 position:relative;
 z-index:1px;}
.bb{
 width:100%;
 height:860px;
 background:url(../../../../Pictures/3705884_193838193308_2.jpg);
 background-size:cover;
 position:absolute;}
.bbbbb{
 width:100%;
 height:860px;
 background-color:#000;
 opacity:0.4;
 position:absolute;}
.bbb{
 width:100%;
 height:200px;
 position:absolute;
 top:300px;
 color:#FFF;
 vertical-align:middle;
 z-index:3px;}
.bbbb{
 width:70%;
 height:200px;
 margin-left:15%;
 top:400px;
 color:#FFF;
 position:absolute;
 vertical-align:middle;
 z-index:3px;}
.c{
 width:90%;
 height:200px;
 background:#F5F5F5;
 margin-left:10%;
 position:relative;}
.d{
 width:90%;
 height:800px;
 background:#F5F5F5;
 margin-left:10%;
 position:relative;}
.e{
 width:360px;
 height:360px;
 border:1px solid #D9D9D9;
 margin-top:2%;
 margin-left:3%;
 float:left;}
.e:hover{
 border:1px solid #414141;
 cursor:pointer;}
.f{
 width:90%;
 height:200px;
 margin-left:10%;
 background:#CDCDCD;
 margin-top:20px;
 position:relative;}
.g{
 width:100%;
 height:40px;
 line-height:30px; 
 float:left;}
.g:hover
{
 background:#CCC;
 color:#FFF;
 cursor:pointer;}

</style>
</head>

<body>
<div class="a"><div class="aa">&nbsp;<b>team</b></div><div class="g">&nbsp;esc</div><div class="g">&nbsp;tab</div><div class="g">&nbsp;capslk</div><div class="g">&nbsp;shift</div><div class="g">&nbsp;ctrl</div><div class="g">&nbsp;alt</div><div class="g">&nbsp;space</div><div class="g">&nbsp;backspace</div></div>
<div class="b"><div class="bb"></div><div class="bbbbb"></div><div class="bbb"><font size="10" ><b><center>ELEGANT DESIGN</center></b></font></div><div class="bbbb"><font face="Lucida Console, Monaco, monospace" size="+2" ><center>We focused on usability template combined useful content blocks hased on that</center></font></div></div>
<div class="c"><font size="+6" face="Lucida Console, Monaco, monospace"><b><center><br />Sercives</center></b></font><br /><font size="+3"><center>This Is What We Are Good At</center></font></div>
<div class="d"><div class="e"></div><div class="e"></div><div class="e"></div><div class="e"></div><div class="e"></div><div class="e"></div></div>
<div class="f"><font size="+6" face="Lucida Console, Monaco, monospace"><center><br />Portfolio</center></font><br /><font size="+3"><center>Some Of Our Accomplishments</center></font></div>
</body>

练习 汉企官网布局

<style type="text/css">
*
{
 margin:0px;
 padding:0px;}
body
{
 min-width:1000px;}
.a{
 width:100%;
 height:100px;
 border:1px solid #000;
 position:fixed;}
.aa{
 width:40%;
 height:80px;
 border:1px solid #000;
 margin-top:10px;
 margin-left:10%;
 position:absolute;}
.aaa{
 width:25%;
 height:30px;
 border:1px solid #000;
 margin-top:5px;
 margin-left:66%;
 position:absolute;}
.aaaa{
 width:35%;
 height:20px;
 border:1px solid #000;
 margin-top:70px;
 margin-left:55%;
 position:absolute;}
.aaaaa{
 width:20%;
 height:20px;
 border:1px solid #000;
 margin-left:4%;
 float:left;}
.b{
 width:100%;
 height:440px;
 border:1px solid #000;
 top:100px;
 position:relative;}
.c{
 width:80%;
 height:500px;
 left:10%;
 border:1px solid #000;
 top:120px;
 position:relative;}
.d{
 width:31%;
 height:230px;
 border:1px solid #000;
 margin:10px;
 float:left;}
.e{
 width:80%;
 height:100px;
 left:10%;
 border:1px solid #000;
 top:140px;
 position:relative;}
.f{
 width:80%;
 height:400px;
 left:10%;
 border:1px solid #000;
 top:160px;
 position:relative;}
.g{
 width:29%;
 height:180px;
 border:1px solid #000;
 margin:10px;
 float:left;}
.i{
 width:65%;
 height:400px;
 border:1px solid #000;
 position:relative;}
.h{
 width:30%;
 height:400px;
 right:0px;
 top:0px;
 border:1px solid #000;
 position:absolute;}
.j{
 width:80%;
 height:400px;
 left:10%;
 border:1px solid #000;
 top:300px;
 position:relative;}
.k{
 width:100%;
 height:50px;
 border:1px solid #000;
 position:relative;}
.l{
 width:20%;
 height:300px;
 border:1px solid #000;
 margin:24px;
 float:left;}
.m{
 width:80%;
 height:250px;
 left:10%;
 border:1px solid #000;
 top:350px;
 position:relative;}
.n{
 width:20%;
 height:250px;
 border:1px solid #000;
 position:absolute;}
.o{
 width:40%;
 height:250px;
 left:25%;
 border:1px solid #000;
 position:absolute;}
.p{
 width:30%;
 height:250px;
 left:70%;
 border:1px solid #000;
 position:absolute;}
.q{
 width:80%;
 height:30px;
 left:10%;
 border:1px solid #000;
 top:400px;
 position:relative;}
.r{
 width:100%;
 height:150px;
 border:1px solid #000;
 top:430px;
 position:relative;}
.s{
 width:22%;
 height:150px;
 left:10%;
 border:1px solid #000;
 position:absolute;}
.t{
 width:22%;
 height:150px;
 left:39%;
 border:1px solid #000;
 position:absolute;}
.u{
 width:22%;
 height:150px;
 left:67%;
 border:1px solid #000;
 position:absolute;}

</style>
</head>

<body>
<div class="a"><div class="aa"></div><div class="aaa"></div><div class="aaaa"><div class="aaaaa"></div><div class="aaaaa"></div><div class="aaaaa"></div><div class="aaaaa"></div></div></div>
<div class="b"></div>
<div class="c"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
<div class="e"></div>
<div class="f"><div class="i"><div class="g"></div><div class="g"></div><div class="g"></div><div class="g"></div><div class="g"></div><div class="g"></div></div><div class="h"></div></div>
<div class="j"><div class="k"></div><div class="l"></div><div class="l"></div><div class="l"></div><div class="l"></div></div>
<div class="m"><div class="n"></div><div class="o"></div><div class="p"></div></div>
<div class="q"></div>
<div class="r"><div class="s"></div><div class="t"></div><div class="u"></div></div>
</body>

时间： 2024-09-10 06:00:14

0813 relative的相关文章

Hive报错 Failed with exception java.io.IOException:java.lang.IllegalArgumentException: java.net.URISyntaxException: Relative path in absolute URI: ${system:user.name%7D

报错信息如下 Failed with exception java.io.IOException:java.lang.IllegalArgumentException: java.net.URISyntaxException: Relative path in absolute URI: ${system:user.name%7D 解决方法: 编辑 hive-site.xml 文件,添加下边的属性 <property> <name>system:java.io.tmpdir<

css深入理解relative

第一讲     relative和absolute相煎关系 同源性 .position:relative .position:absolute 限制作用 1.限制left/top/right/bottom定位 2.限制z-index层级 3.限制在overflow下嚣张气焰 1.限制定位,如果没有relative限制,元素定位absolute会可以在任何地方定位 2.限制层级 z-index 层级越高 3.限制超越overflow relative与fixed 同源性 .position:rel

布局模型 之 层模型（position的relative、absolute与fixed区别？）

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

CSS属性之relative

0.相对定位relative特点 相对定位relative元素总是会占据位置,所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置: 相对定位relative元素在设置定位时,不会影响其他元素: 相对定位relative元素在设置定位时,是相对于自身的定位 <div class="page"> <div class="backTop">position:relative</div> &

Absolute and relative references in Excel

Keywords: Excel, fill multiple cells, formula, no series Absolute and relative references in Excel When you create a formula in Excel that refers to other cells in the worksheet, Excel will store the information about those cells as relative referenc

[Angular 2] Component relative paths

Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component({ selector : 'contacts-header', templateUrl: './header.component.html', styleUrls : ['./header.component.css'] }) export class HeaderComponent implement

Relative与Absolute组合使用

小伙伴们学习了绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后, 大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以.使用position:relative来帮忙,但是必须遵守下面规范: 1.参照定位的元素必须是相对定位元素的前辈元素: <div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位<

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层