CSS渡一教程学习笔记(六)--层模型、position定位。

层模型

如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

绝对定位和相对定位 有以下四个属性

left
top
right
bottom

1、position:absolute

脱离原来位置进行定位,常有原位置被清除,随后元素占据,absolute在最上层
最近的有定位的父级进行定位,如果没有,则相对于文档进行定位。

2、position:relative

保留原来位置进行定位。
相对自己原来的位置进行定位
notice:用relative设置参照物,用absolute进行定位

3、position:fixed

== 广告定位,也就是固定定位==

4、z-index:1就是z轴,数值越大,越靠近"你",默认是0

实践:五环居中


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五环居中title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .plot{
            position:absolute;
            width:760px;
            height:340px;
            left:50%;
            top:50%;
            margin-left:-380px;
            margin-top:-170px;
        }
        .circle1,
        .circle2,
        .circle3,
        .circle4,
        .circle5{
            position:absolute;
            width:200px;
            height:200px;
            border-radius: 50%;
            border:20px solid red;
        }
        .circle1{
            border-color: red;
            top:0px;
            left:0px;
        }
        .circle2{
            border-color: green;
            top:0px;
            left:260px;
            z-index: 5;
        }
        .circle3{
            border-color: yellow;
            top:0px;
            left:520px;
        }
        .circle4{
            border-color: blue;
            top:100px;
            left:130px;
        }
        .circle5{
            border-color: purple;
            top:100px;
            left:390px;
        }
    style>
head>
<body>
<div class="plot">
    <div class="circle1">div>
    <div class="circle2">div>
    <div class="circle3">div>
    <div class="circle4">div>
    <div class="circle5">div>
div>


body>
html>

效果:CSS渡一教程学习笔记(六)--层模型、position定位。_第1张图片
实践:两栏分布


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .left{
            position:absolute;
            right:0px;
            width:50%;
            height:100px;
            background-color:#FCE;
            opacity:0.5;

        }
        .right{
            height:100px;
            width:50%;
            background-color:#EFFFFF;
        }
    style>
head>
<body>
<div class="left">div>
<div class="right">div>
body>
html>

结果:
CSS渡一教程学习笔记(六)--层模型、position定位。_第2张图片

你可能感兴趣的:(css)