Web前端 学习笔记7（定位）

最新推荐文章于 2024-11-04 14:35:19 发布
最新推荐文章于 2024-11-04 14:35:19 发布
阅读量182 收藏
点赞数
分类专栏： Web前端 文章标签： css html html5 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu_yongheng/article/details/113804132
版权

定位是一种更加高级的布局手段，通过定位可以将一个元素摆放到页面的任意位置，使用position属性来设置定位。

目录

知识点学习

1、定位的简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 60px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color:green;
            /* 
                定位（position）
                    - 定位是一种更加高级的布局手段
                    - 通过定位可以将一个元素摆放到页面的任意位置
                    - 使用position属性来设置定位
                        可选值：
                            static 默认值 没有开启定位
                            relative 开启相对定位
                            absolute 开启绝对定位
                            fixed 开启固定定位
                            sticky 开启粘滞定位

                    - 相对定位：
                        - 设置 relative ，开启相对定位
                        - 相对定位的特点：
                            1、元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化
                            2、相对于原来文档流的位置
                            3、会提升元素的层级
                            4、相对定位不会使元素脱离文档流
                            5、相对定位不会改变元素的性质

                    - 偏移量（offset）
                        - 当元素开启了定位以后，可以通过偏移量来设置元素的位置
                            top  距离顶部的距离
                            bottom 距离底部的距离
                            left 
                            right

             */
             position: relative;
             top: -200px;
             left: 200px;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

</body>
</html>

2、绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 60px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color:green;
            /* 
               绝对定位：
                - 当元素 position 属性值设置为 absolute 开启绝对定位
                - 绝对定位的特点：
                    1、开启绝对定位以后，如果不设置偏移量元素的位置不会发生变化
                    2、开启绝对定位以后，元素会从文档流中脱离
                    3、会改变元素的性质，行内变成块，块的宽高被内容撑开
                    4、会提升元素的层级
                    5、绝对定位元素是相对于包含快进行定位的

                    包含块：
                        -正常情况下：
                            包含块就是当前元素最近的祖先 块 元素

                        - 绝对定位的包含块：
                            包含块就是离它最近的开启了定位的祖先元素
                                如果所有的祖先元素都没有开启定位，那么根据根元素

             */
             position: absolute;
             top: 0;
             left: 0;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box4{
            width: 400px;
            height: 400px;
            background-color: rgb(119, 0, 255);
            position: relative;
        }

        .box5{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 0, 179);
            position: relative;
        }
    </style>
</head>
<body>

    <div class="box1">1</div>

    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>       
    </div>


    <div class="box3">3</div>

</body>
</html>

3、固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 60px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color:green;
            /* 
                固定定位：
                    - 也是一种绝对定位，大部分特点和绝对定位一样

                    - 唯一不同的是，固定定位永远参考浏览器的视口进行定位
                        不会随着窗口的滚动而滚动

                    - 小广告
             */
            position: fixed;
            left: 0;
            top: 0;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box4{
            width: 400px;
            height: 400px;
            background-color: rgb(119, 0, 255);
            position: relative;
        }

        .box5{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 0, 179);
        }
    </style>
</head>
<body>

    <div class="box1">1</div>

    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>       
    </div>


    <div class="box3">3</div>

</body>
</html>

4、粘滞定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <style>

        body{
            height: 3000px;
        }

        *{
            margin: 0;
            padding: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 */
            list-style: none;
            margin-left: 20px;
        }
        
        .nav{
            width: 1205px;
            height: 48px;
            background-color: #E8E7E3;

            margin: 100px auto;

            /* 
                粘滞定位：
                    - 和相对定位的特点基本一致，不同的是粘滞定位可以将一个元素到达某个位置的时候不动
             */
            position: sticky;
            top: 0;
        }

        

        .nav li{
            float: left;
            line-height: 48px;

        }

        .nav a{
            display: block;
            text-decoration: none;
            color: #777777;
            font-size: 18px;

            padding: 0 39px;

        }

        .nav a:hover{
            background-color: #3f3f3f;
            color: #e8e7e3;
        }
    </style>
</head>

<body>
    <!-- 创建导航条的结构 -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
    
</body>
</html>

5、绝对定位元素的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: absolute;

             /* 
                水平布局：
                    必记等式
                        left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 父元素内容区的宽度
                
                - 当开启绝对定位以后，就需要添加left 和 right

                -- 垂直居中的实现

              */

            right: 0;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

6、元素的层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 60px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: wheat;
            position:absolute;
            /* 
                在开启了定位元素，可以通过z-index 属性来指定元素的层级
                    z-index 需要一个整数作为参数，值越大，层级越高
                        元素层级越高，越优先显示

                    当层级一样的时候，显示靠下的元素

                    祖先元素永远不会盖住后代元素
             */
             z-index: 1;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color:rgba(255, 0, 0, .5);
            position:absolute;
            top: 50px;
            left: 50px;
            z-index: 2;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
            position:absolute;
            top: 100px;
            left: 100px;
            z-index: 3;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: rgb(0, 255, 115);
            position:absolute;
            
        }
    </style>
</head>
<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4"></div>
    </div>

    

</body>
</html>

7、京东轮播图练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 去除默认样式 */
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 */
            list-style: none;
            margin-left: 20px;
        }

        .img-list{
            width: 400px;
            height: 300px;
            margin: 100px auto;
            /* 
                ul开启相对定位，是为了可以参照这个定位
             */
            position: relative;
        }

        .img-list li{
            position: absolute;
        }

        .img-list li:nth-child(4){
            z-index: 1;
        }

        .pointer{
            position: absolute;
            z-index: 9999;
            bottom: 20px;
            left: 40px;
        }

        .pointer a{
            /* 设置元素向左浮动 */
            float: left;
            width: 10px;
            height: 10px;
            margin-left: 4px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .6);
            background-clip: content-box;
            border: 2px solid transparent;
        }

        .pointer a.active,
        .pointer a:hover{
            background-color: #fff;
            border: 2px solid rgba(255, 255, 255, .3);
        }
    </style>
</head>
<body>

    <ul class="img-list">
        <li class="li1">
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/1.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/2.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/3.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/4.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/5.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/6.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/7.jpg">
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <img width="400px" height="300px" src="./05/8.jpg">
            </a>
        </li>

        <div class="pointer">
            <a class="active" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>

    </ul>
    
</body>
</html>

总结

下一篇：字体和背景。

MYH永恒
关注
专栏目录
Web前端学习笔记——定位
weixin_43121163的博客
02-23 239
定位： 定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位。 可选值： static：默认值，元素是静止的没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的固定定位 sticky：开启元素的粘滞定位 相对定位： 当元素的position属性值设置为relative时则开启了元素的相对...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
DIV绝对定位 position、z-index、top、right、bottom和left属性
jangta的专栏
09-27 1376
DIV绝对定位 position、z-index、top、right、bottom和left属性 一、[b]Position[/b] 1、语法：position:static/ absolute / fixed / relative 2、参数： （1）[b]static[/b]：默认值，无特殊定位，对象遵循HTML定位规则。 （2）[b]absolute[/b]：将对...
CSS（五）
bishan2898498的博客
11-06 232
定位：相对定位、绝对定位、固定定位、静态定位
Web前端基础3-定位
William_fang的博客
03-31 754
文章目录一.定位0.案例1.相对定位（relative）2.绝对定位（absolute）3.固定定位（fixed） 一.定位 定位常用的属性：left、right、top、bottom 0.案例 position.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位和布局</title> <link hre
Web前端学习笔记
DAOkonglong的博客
10-16 3698
Web前端学习
WEB前端学习笔记
weixin_48009833的博客
09-24 3310
一、Web标准的构成 主要包括结构、表现、行为三个方面，三者之中结构最重要。 结构：结构用于对网页元素进行整理和分类，主要指的是HTML。 表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。 行为：行为是指网页模型的定义及交互的编写，主要指的是Javascript。 二、结构（HTML） 1.HTML的语法规范 1.1基本语法概述 ...
前端基础学习笔记
sober30的博客
07-27 4501
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
JavaWeb前端内容学习笔记
2202_75452684的博客
07-19 1852
本文包含前端内容：HTML、CSS、JavaScript、BOM、DOM、VUE、Element、Nginx
web前端最全笔记
qqyang_的博客
07-14 4477
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
web前端学习笔记.docx编程资料
04-06
### Web前端学习笔记知识点概述 #### 一、Web基础知识 ##### 1.1 Web与Internet - **Internet**: 是一个全球性的计算机互联网络，提供多种服务如Telnet、Email、WWW、BBS、FTP等。它基于分组交换原理及TCP/IP协议...
web前端基础学习笔记
01-08
### Web前端基础学习笔记 #### 一、HTML ##### 1. HTML简介 - **网站与网页**: 网页是使用HTML标记语言编写的文件，用于描述同一范畴内的信息或数据。多个网页组成一个网站。 - **HTML**: 超文本标记语言，是一种...
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
web前端.pdf 笔记
04-04
5. **前端学习路径和职业发展**：文档详细介绍了前端开发工程师在学习和职业发展上的建议，包括如何正确看待前端开发、如何自我定位、如何应对技术面试以及如何制定职业规划。这部分内容对于刚入行的开发者特别有...
前端小结———关于定位和浮动的一些学习心得
Aonlyao的博客
07-30 1817
对于刚开始学前端的来说，定位和浮动是在页面布局中一定会遇到的，你可能也会跟我一样会感觉有点晕乎乎，但是其实理解并实际操作之后就会理清楚他们之间的关系，并且很好的利用在页面布局当中。以下是我的一些学习总结，前端小白一枚，如有不足之处，还望各路大神多多指教。 定位（position）主要有以下几个： 1、static，静态定位，也是网页中默认的定位，属于在正常的文档流当中。 2、relative，...
CSS例子: 横向排列的格子
11-01 461
【代码】CSS例子: 横向排列的格子。
Vue 自定义icon组件封装SVG图标
最新发布
gaowxx的博客
11-04 418
通过自定义子组件CustomIcon.vue使用SVG图标，相比iconfont下载文件重新替换更节省时间
CSS:基础选择器,文字控制属性(HTML)
m0_75035023的博客
11-04 364
CSS:基础选择器,文字控制属性(HTML),javaweb
CSS与CSS3前端美化页面学习笔记完整版
资源摘要信息:"CSS与CSS3美化页面课堂笔记" CSS（层叠样式表）是网页设计中不可或缺的技术，它主要用于控制...通过这些学习笔记和源码练习，前端开发者可以加深对CSS和CSS3的理解，并有效提升自己的设计与开发能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MYH永恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值