Web前端开发-定位类型

Web前端开发,自学笔记整理


定位类型

1.绝对定位


<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: lightblue;

                /*定位
                    static: 默认值,没特殊定位 
                    absolute:绝对定位
                    relative:相对定位
                    fixed:固定定位
                */

                /*absolute:绝对定位
                    - 脱离文档流 
                    - 相对于谁(不固定)
                        往上找(包含关系),找有定位属性的
                        如果都没有,即相对于body
                */
                position: absolute;
                /*距离:lfet、right、top、bottom*/
                /*left: 100px;*/
                right: 50px;
                bottom: 70px;
            }
        style>
    head>
    <body>
        <div class="box">div>
    body>
html>

2.相对定位


<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: lightblue;

                /*相对定位
                    - 相对于谁(自己) 
                */
                position: relative;
                right: 30px;
                bottom: 30px;
            }
        style>
    head>
    <body>
        <div class="box">div>
    body>
html>

3.固定定位


<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位title>
        <style type="text/css">
            .box {
                width: 1000px;
                height: 700px;
                border: 1px solid gray;
                margin: 0 auto;
            }
            .tel {
                width: 30px;
                height: 40px;
                background: lightcoral;
                /*
                固定定位
                    - 相对于整个窗口        
                */
                position: fixed;
                right: 10px;
                bottom: 200px;
                color: white;
                font-size: 13px;
            }
        style>
    head>
    <body>
        <div class="box">div>
        <div class="box">div>
        <div class="box">div>

        <div class="tel">返回顶部div>
    body>
html>

你可能感兴趣的:(HTML/CSS)