8、定位锚点

作者: calvinbj | 来源:发表于2019-02-28 16:49 被阅读0次

position:absolute实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .fu{width: 300px; height: 300px; background: #99c;margin: 0 auto;}
    .fu2{width: 200px;height: 200px;background: #f9c;margin: 0 auto;position: relative; }
    .box{width: 100px;height: 100px;background:rgba(0,255,0,0.7);position: absolute;left: 50px;top: 50px;}
    .box2{background: #0ff;}
    </style>
</head>
<body>
    <div class="fu">
        <div class="fu2">
                <div class="box"></div>
        </div>
    </div>
    <div class="box2">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。</div>
</body>
</html>

.fu2{width: 200px;height: 200px;background: #f9c;margin: 0 auto; position: relative; }
.box{width: 100px;height: 100px; background:rgba(0,255,0,0.7); position: absolute;left: 50px;top: 50px;}

上面代码中的关键语句父标签中的position：relative必须和子标签中的position：absolute合用。其中，子标签中的left：50px；和top：50px；是相对于父标签的位置做定位而移动的。

position:relative实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{width: 100px;height: 100px;background:rgba(0,0,255,0.7);position: relative;left: 20px;top: 20px;}
    .box2{background: #0ff;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。</div>
</body>
</html>

.box{width: 100px;height: 100px; background:rgba(0,0,255,0.7); position: relative; left: 20px; top: 20px;}

position:fixed实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{width: 100px;height: 100px;background:#f00;}
    .box2{width: 200px;height: 200px; background: #f0f;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

未加position：fixed之前

加上position：fixed

<style type="text/css">
    .box{width: 100px;height: 100px;background:#f00;position: fixed;}
    .box2{width: 200px;height: 200px; background: #f0f;}
    </style>

未添加z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{width: 100px;height: 100px;background:#f00;}
    .box2{width: 200px;height: 200px; background: #0f0;}
    .box3{width: 200px;height: 200px; background: #00f;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

box1加入position：absolute；left：30px；top：30px；

.box1{width: 100px;height: 100px;background:#f00;position: absolute;left: 30px;top: 30px;}

接着box2加入position：relative；left：50px；top：50px；

<style type="text/css">
    .box1{width: 100px;height: 100px;background:#f00;position: absolute;left: 30px;top: 30px;}
    .box2{width: 200px;height: 200px; background: #0f0;position: relative;left: 50px;top: 50px;}
    .box3{width: 200px;height: 200px; background: #00f;}
</style>

box1加入z-index：1
box2加入z-index：10
box3加入position：relative；z-index：100

<style type="text/css">
    .box1{width: 100px;height: 100px;background:#f00;position: absolute;left: 30px;top: 30px;z-index: 1;}
    .box2{width: 200px;height: 200px; background: #0f0;position: relative;left: 50px;top: 50px;z-index: 10;}
    .box3{width: 200px;height: 200px; background: #00f;position: relative;z-index: 100;}
</style>

综合实例
https://ke.qq.com/webcourse/index.html#cid=258410&term_id=100304681&taid=1870776085246314&vid=n1422w8ebmv

实例(作用类似于“回到顶部”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{width: 100px;height: 3000px;background:#f00;}
    .box2{width: 100px;height: 3000px; background: #0f0;}
     </style>
</head>
<body>
    <h1 id="p1">我是位置一</h1>
    <div class="box1"></div>
    <h1 id="p2">我是位置二</h1>
    <div class="box2"></div>
    <a href="#p1">我要跳转到位置一</a>
    <a href="#p2">我要跳转到位置二</a>
</body>
</html>

综合案例——轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    img{display: block;}
    .box{width: 565px;height: 400px;border: 1px #000 solid;margin: 50px auto;position: relative;}
        .btn{position: absolute;right: 5px;bottom: 10px;}
        .btn a{float: left;
            width: 30px;height: 30px;background: rgba(0,0,0,.5);text-align: center;line-height: 30px;text-decoration: none;margin-right: 5px;color: #fff;}
        .btn a:hover{background: rgba(0,0,0,1);}
        .list{width: 565px;height: 400px;overflow: hidden;}
    </style>
</head>
<body>
    <div class="box">
        <div class="btn">
            <a href="#img1">1</a>
            <a href="#img2">2</a>
            <a href="#img3">3</a>
            <a href="#img4">4</a>
        </div>
        <div class="list">
            <img src="images/4.jpg" alt="" id="img1" />
            <img src="images/5.jpg" alt="" id="img2"/>
            <img src="images/6.jpg" alt=""
            id="img3"/>
            <img src="images/7.jpg" alt=""
            id="img4"/>
        </div>
    </div>
</body>
</html>