CSS（四）定位布局

全文手打，转载请注明出处

全文手打，转载请注明出处

全文手打，转载请注明出处

一）定位

定位position：设定元素在文档中的位置，会将标签（元素）转换为块级

定位分类：

static：静态定位（默认值，没有定位，不能设置偏移值left/top/right/bottom，占用标准流/文档流）

relative：相对定位（占用标准流/文档流，它会出现在文档流中它该出现的位置，可以通过设置偏移值改变其位置）相对定位是父级

absolute：绝对定位（脱离文档流，相对于body做偏移）绝对定位与相对定位结合使用，相对的是relative定义的元素做偏移，绝对定位是子级

fixed：固定定位（脱离文档流，相对于浏览器窗口左上角做偏移），一般在开发中用来固定导航栏

.wrapper{
  width: 600px;
  height: 400px;
  border:1px soild #888;
  margin: 0 auto;
}
.box1,.box2,.box3{
  width: 150px;
  height: 150px;
  border:1px dotted red;
  display: inline-block;
}
.box2{
  //position: static;    //设置为static，不识别left，top
  position: relative;     //可以，相对于原来的占位做偏移
  position: absolute;      //脱离文档流，相对于body进行偏移
  position: fixed;
  left: 100px;
  top: 200px;
}

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

 

二）z-index调整显示顺序

当多个元素添加绝对定位，元素会叠加在一起，使用z-index可以设置元素显示的层次，用在static和relative元素上是无效的

文档流默认的z-index值为0

.box1,.box2,.box3{
  position: absolute;        //绝对定位
}

.box1{
  z-index: 3;
}
.box2{
  z-index: 2;
}
.box3{
  z-index: 1;
}                                //重叠顺序，box1最上面

 

 

网站开发策略：先整体再局部，自顶向下，逐步细化

三）双飞翼布局：三列组成，两端固定，中间自适应

.container{
  width: 100%;
}
.column{
  float:left;
  height: 200px;
}
.left{
  width: 300px;
  background-color: red;
  margin-left: -100%;
}
.center{
  width: 100%;
  background-color: red;
}
.right{
  width: 300px;
  background-color: red;
  margin-left: -300px;
}

<div class="container">
  <div class="column center"></div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>

 

四）圣杯布局：三列组成，两端固定，中间自适应（外观和双飞翼一样）

 

五）两栏布局，左宽度固定，右自定义

.container{
  width: 100%;
  overflow: hidden;         //清除浮动
}
.left{
  width: 150px;
  height: 200px;            //实际开发不要给高度，高度由内容自行撑开
  float: left;
  background-color: #999;
  margin-right: -150px;     //让left向左挪150px，把right挪到同一行
  position: relative;       //让left占自己原来的位置，挡住部分right内容
}
.right{
  width: 100%;
  height: 200px;            //实际开发不要给高度，高度由内容自行撑开
  float: left;
  background-color: #090;
  margin-left: 150px;       //把right左侧空出来left的宽度
}

<div class="container">
  <div class="left">左侧固定</div>
  <div class="right">右侧自适应</div>
</div>

六）两栏布局，右宽度固定，左自定义

.container{
  width: 100%;
  overflow: hidden;    //清除浮动
}
.left{
  width: 100%;
  height: 200px;   
  float: left;
  background-color: #090;
}
.right{
  width: 150px;
  height: 200px;
  float: left;
  background-color: #999;
  margin-left: -150px;    
}


<div class="container">
  <div class="left">左侧自适应</div>
  <div class="right">右侧固定</div>
</div>

七）两栏布局，左右都固定

.container{
  width: 100%;
  overflow: hidden;    //清除浮动
}
.left{
  width: 1000px;
  height: 200px;   
  float: left;
  background-color: #090;
}
.right{
  width: 780px;
  height: 200px;
  float: right;
  background-color: #999;
  margin-left: -150px;    
}


<div class="container">
  <div class="left">左侧固定</div>
  <div class="right">右侧固定</div>
</div>

 

八）三栏布局，左、右固定，中间自适应

 

.container{
  width: 100%;
  overflow: hidden;    //清除浮动
}
.left,.right{
  width: 200px;
  height: 200px;   
  line-height: 200px;    //line-height：行高，，文字底部到上一行文字底部的距
  float: left;
  background-color: #090;
  position: relative;
}
.left{
  margin-right: -200px;
}
.right{
  margin-left: -200px;
}
.center{
  width: 100%;
  height: 200px;   
  float: left;
  background-color: #999;
}
.content{
  margin: 0 200px;
}

<div class="container">
  <div class="left">左侧固定</div>
  <div class="center">
      <div class="content">中间自适应</div>
  </div>
  <div class="right">右侧固定</div>
</div>

九）三栏布局，中间、右固定，左自适应（自己发挥吧，你可以的）

十）三栏布局，左、中间固定，右自适应（自己发挥吧，你可以的）