HTML_CSS学习:定位

一、相对定位

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .outer{
            width: 500px;
            background-color: #999ff0;
            border: 1px solid #000;
            padding: 20px;
        }
        .box{
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1{
            background-color: #ff0000;
        }
        .box2{
            background-color: #00ff00;
            /*position: relative;*/
            /*left: 100px;*/
        }
        .box3{
            background-color: #0000ff;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

</body>
</html>

显示结果:

二、绝对定位

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .outer{
            width: 500px;
            background-color: #999ff0;
            border: 1px solid #000;
            padding: 20px;
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1{
            background-color: #ff0000;
        }
        .box2{
            background-color: #00ff00;
            position: absolute;
            top: 220px;
            left: 20px;
            /*transition: 1s all linear;*/
            /*float: right;*/
            /*top: 50px;*/
            /*right: 50px;*/
            /*right: -100px;*/
            /*bottom: -50px;*/
            /*margin-left: 50px;*/
            /*margin-top: 50px;*/
            /*margin-right: 3000px;*/

        }
        .box3{
            background-color: #0000ff;
        }
        .outer:hover .box2{
            left:220px
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
<!--        定位元素也能设置宽高-->
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

</body>
</html>

显示结果:

三、固定定位

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .outer{
            width: 500px;
            background-color: #999ff0;
            border: 1px solid #000;
            padding: 20px;
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1{
            background-color: #ff0000;
        }
        .box2{
            background-color: #00ff00;
            position: fixed;
            bottom:0;
            right:0;
            float: left;
        }
        .box3{
            background-color: #0000ff;
        }
        .outer:hover .box2{
            left:220px
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
<!--        定位元素也能设置宽高-->
        <span class="box box2">heiheiehiehiehiei</span>
        <div class="box box3">3</div>
    </div>
    <div>lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt temporatempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaec
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt temporatempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenet
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,
        excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecati
        odio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt temporatempore tenet
    </div>

</body>
</html>

显示结果:

四、粘性定位

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘性定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
        }
        .page-header{
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #bfad39;
            font-size: 20px;
        }
        .item{
            background-color: silver;
        }
        .first{
            background-color: #0dcaf0;
            font-size: 40px;
            position: sticky;
            top: 0px;
        }

    </style>
</head>
<body>
<!--    头部-->
    <div class="page-header">头部</div>
<!--    内容区-->
    <div class="content">
<!--        每一项-->
        <div class="item">
            <div class="first">A</div>
            <h2>A1</h2>
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
            <h2>A6</h2>
            <h2>A7</h2>
            <h2>A8</h2>
        </div>
        <div class="item">
            <div class="first">B</div>
            <h2>B1</h2>
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
            <h2>B6</h2>
            <h2>B7</h2>
            <h2>B8</h2>
        </div>
        <div class="item">
            <div class="first">C</div>
            <h2>C1</h2>
            <h2>C2</h2>
            <h2>C3</h2>
            <h2>C4</h2>
            <h2>C5</h2>
            <h2>C6</h2>
            <h2>C7</h2>
            <h2>C8</h2>
        </div>
    </div>

</body>
</html>

显示结果:

五、定位的层级

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位的层级</title>
    <style>
        .outer{
            width: 500px;
            background-color: #999ff0;
            border: 1px solid #000;
            padding: 20px;
            position: relative;
            z-index: 2;
        }
        .box{
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1{
            background-color: #ff0000;
        }
        .box2{
            background-color: #00ff00;
            position: relative;
            top: -150px;
            left: 50px;
            /*z-index:auto;*/
        }
        .box3{
            background-color: #0000ff;
            position: absolute;
            top: 130px;
            left: 130px;
        }
        .box4{
            background-color: #00ffb7;
            position: fixed;
            top: 200px;
            left: 200px;
            z-index: 50;
        }
        .box5{
            background-color: #ff00ff;
            position: fixed;
            top: 300px;
            left: 300px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
    </div>

</body>
</html>

显示结果:

六、定位可以越过padding

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位可以越过padding</title>
    <style>
        .outer{
            width: 800px;
            height: 600px;
            padding: 20px;
            background-color: #999ff0;
            position: relative;

        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

</body>
</html>

显示结果:

七、定位的特殊应用1

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位的特殊应用</title>
    <style>
        .outer{
            height: 400px;
            background-color: silver;
            position: relative;
        }
        .inner{
            background-color: yellow;
            font-size: 20px;
            padding: 20px;
            border: 10px solid #000;
            position: absolute;
            /*top:0;*/
            left: 0px;
            right:0px;
            top:0px;
            bottom:0px;
            /*width: 100%;*/
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>
</body>
</html>

显示结果:

八、定位的特殊应用2

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位的特殊应用</title>
    <style>
        .outer{
            height: 400px;
            width: 800px;
            background-color: silver;
            /*overflow: hidden;*/
            position: relative;
        }
        .inner{
            width: 400px;
            height: 100px;
            background-color: yellow;
            font-size: 20px;
            /*nargin:0 auto;*/
            /*margin-top: 150px;*/
            position: absolute;
            /*top:0;*/
            /*bottom: 0;*/
            /*left: 50%;*/
            /*right: 50%;*/
            /*top:50%;*/
            /*margin-left: -200px;*/
            /*margin: auto;*/
            top:0;
            bottom:0;
            left:0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>

</body>
</html>

显示结果:

相关推荐
咖啡教室13 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
云上艺旅16 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
CodePencil16 小时前
CSS专题之盒模型
前端·css
你觉得20517 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
强化生物科研小助手17 小时前
CAS:47623-98-3,DiSBAC2(3)一种慢反应的膜电位敏感探针
django·html·pygame
A旧城以西18 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ18 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007518 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆18 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone19 小时前
MySQL学习集--DDL
数据库·sql·学习