首页 > 其他分享 >CSS学习14[重点]--定位、边偏移、定位模式

CSS学习14[重点]--定位、边偏移、定位模式

时间:2024-09-06 19:25:19浏览次数:12  
标签:定位 14 -- 100px height color background left

定位

前言

为什么学习定位?
应用场景:图片上移动的物体、突出的部分、导航栏…

一、定位

  1. 边偏移

    top: 100px;
    bottom: ;
    left: ;
    right: ;

  2. 定位模式

    选择器{position: absolute;}
    值包含static|relative|absolute|fixed

  3. 完整定位=边偏移+定位模式

二、定位模式

1. 静态定位 static

(1)静态定位是所有元素默认的定位方式,即html的标准流。
(2)对于边偏移无效。
(3)一般用来清除定位

2. 相对定位 relative

(1)以自己的左上角为基准移动
(2)可以通过边偏移继续占有原来的位置
(3)相对定位的元素仍在原来的位置,相对定位不脱标,目的在于移动位置

<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        div:nth-child(2) {
            position: relative;
            top: 10px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

3. 绝对定位 absolute

绝对定位完全脱标,不占有位置

(1)父级没有定位
如果父级没有定位,则以浏览器为标准定位。

<html>
<head>
    <style>
        .father {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;
        }
        .son {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

(2)父级有定位
如果父级有定位,则以父级为基准。

<html>
<head>
    <style>
        .father {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

4. 子绝父相

子级是绝对定位,父级只要是定位即可。
相对定位 占有位置 不脱标
绝对定位 不占有位置 脱标

<html>
<head>
    <style>
        div {
            width: 310px;
            height: 190px;
            border: 1px solid #fff;
            margin: 50px;
            padding: 10px;
        }
        .top {
            position: absolute;
            top: 0;
            left: 0; 

        }
    </style>
</head>
<body>
    <div><!--绝对定位,下面的会跑上去-->
        <img src="#.jpg" alt="">
        <img src="#.jpg" alt="" class="top">
    </div>
</body>
</html>

5. 绝对定位的盒子水平居中

(1)加了绝对定位的盒子,margin: 0 auto; 无效
(2)如何使其水平居中?

	水平:left: 50%; margin-left: -w;
	垂直:top: 50%; margin-top: -h;
<html>
<head>
    <style>
        .father {
            width: 500px;
            height: 300px;
            background-color: palegoldenrod;
            position: relative;
            margin: 0 auto;
        }
        .son {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: purple;
            margin: 0 auto; /*无效*/
            left: 250px;
            left: 50%; /*父级盒子一半*/
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="father"><!--绝对定位,下面的会跑上去-->
        <div class="son"></div>
    </div>
</body>
</html>

(3)淘宝图例子

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .slider {
            width: 500px;
            height: 300px;
            background-color: palegoldenrod;
            position: relative;
            margin: 50px auto;
        }
        .arrow-l,
        .arrow-r {
            width: 20px;
            height: 30px;
            position: absolute;
            background-color: purple;
            display: block;
            top: 50%;
            margin-top: -10px;
        }
        .arrow-l {
            left: 0;
        }
        .arrow-r {
            right: 0;
        }
        /*小圆点*/
        .circle {
            width: 65px;
            height: 20px;background-color: rgba(0,0,0,0.3);
            position: absolute;
            bottom: 15px; /*靠下对齐*/
            left: 50%;
            margin-left: -32px;
            border-radius: 10px 10px;
        }
        .circle li {
            width: 10px;
            height: 10px;
            background-color: #ccc;
            float: left;
            margin: 5px 3px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="slider"><!--绝对定位,下面的会跑上去-->
        <img src="#.png">
        <a href="" class="arrow-l"><img src="#.png"></a>
        <a href="" class="arrow-r"><img src="#.png"></a>
        <ul class="circle">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

6. 固定定位(fixed)

(1)固定定位是绝对定位的特殊形式
(2)固定定位的元素和父亲没有任何关系,只认浏览器
(3)固定定位完全脱标,不占有位置,不随滚动条滚动
(4)例子

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .a {
            width: 100%;
            height: 10px;
            background-color: palegoldenrod;
            position: fixed;
        }
        .box {
            width: 100px;
            height: 1000px;
            background-color: purple;
            padding-top: 10px;
        }   
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="box">123</div>
</body>
</html>

7. 叠放次序(z)

叠放次序用于调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,可以取值正整数、负整数、0.

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
        }
        div:first-child {
            z-index: 1;
        }
        div:nth-child(2) {
            background-color: purple;
            top: 30px;
            left: 30px;
            z-index: 2;
        }
        div:nth-child(3) {
            background-color: skyblue;
            top: 60px;
            left: 60px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

注意:

  • z-index默认属性是0,取值越大,定位元素在层叠元素中越居上
  • 如果取值相同,按照书写顺序后来居上
  • 后面的数字不能加单位
  • 只有相对定位、绝对定位、固定定位有这个属性,其余标准流、浮动、静态定位没有该属性

三、四种定位总结

定位模式
静态定位static:不脱标,正常模式
相对定位relative:不脱标,占有位置,相对自身移动
绝对定位absolute:完全脱标,不占有位置,相对于定位父级移动
固定定位fixed:完全脱标,不占有位置,相对于浏览器移动

四、定位模式转换

(1)和浮动一样,元素添加了绝对定位和固定定位后,元素模式会转换为行内块模式
(2)行内元素如果添加了绝对定位或者固定定位后,不用转换直接给高度和宽度。

<html>
<head>
    <style>
        div {
            height: 200px;
            background-color: pink;
            /*float: left; 没给盒子宽度,浮动的盒子模式转换*/
            /*position: fixed; relative不转换*/
        }
        span {
            background-color: aquamarine;
            display: block;
            width: 100px;
            height: 100px;
            float: left; /*如果盒子本身需要添加浮动、绝对定位,则不需要转换*/
        }
    </style>
</head>
<body>
    <div>12345</div>
    <span>行内元素</span>
</body>
</html>

标签:定位,14,--,100px,height,color,background,left
From: https://blog.csdn.net/qq_54641174/article/details/141939454

相关文章

  • 简单比较 http https http2,我们要如何把http升级为https
    ......
  • Modern C++——使用分支预测优化代码性能
    大纲[[likely]][[unlikely]]样例应用场景题外参考代码参考资料在C++20中,新引入了一对属性关键字[[likely]]和[[unlikely]],它们用于为编译器提供关于代码分支执行概率的额外信息,以帮助编译器进行更好的优化。这对属性是基于长期实践中开发人员对程序执行路径的深入理解......
  • CF1534(模拟赛记录)
    比赛页面ABCD都打的可以,然而E的+10直接葬送了大概率过的F1……先猜了个\(n-k+1\)的结论,但是没有写搜索查正确性(事实上确实不正确),于是两次罚时,第一次是交互格式错了。然后又猜了个\(\min(n-k+1,(n-1)/(k-1))\)的结论,过了几个小的搜索数据(\(n\le6\))的,大一点的没跑,于......
  • 隐式转化。
          //隐式转化是数据类型转换的一种方式      //隐式转化就是小类型转化为大类型      //类型大小判断可以通过包含关系来区分      //类型大小判断也可以通过父子关系来区分      //有符号整型    ......
  • 京东云金秋上云轻量云服务器!
    轻量云主机是面向中小企业、开发者打造的预装精选软件、开箱即用的主机产品,快速搭建网站、电商、企业低代码工具箱,云盘、共享文档、知识库、开发测试环境等,相对普通云主机,按套餐购买更优惠、控制台可视化管理,运维更简单,提供更便捷上云体验。轻量云主机这个专区是本次活动的主......
  • oracle锁的机制
    文章目录oracle锁的机制1.概括2.锁的模式3.锁查看死锁1.说明2.死锁产生条件3.解决死锁冲突4.事务和死锁预防总结oracle锁的机制1.概括1)说明锁是一种机制,多个事务同时访问一个数据库对象时,该机制可以实现对并发的控制2)oracle中锁的类别1.DDL锁:oracle自动......
  • GIT详细教学(保姆式教学)
    GIT学习目标1.能说出GIT的工作流程2.使用GIT完成常用操作【本地操作、运程操作、协作】git菜鸟网站https://www.runoob.com/git/git-tutorial.htmlgitlab服务器地址:http://47.96.143.141:9999/http://git.eehp.cn/users/sign_in00.GIT课程学习方法介绍务必......
  • 基于Java的旅游景区网站系统设计与实现
    演示地址前台地址:http://travel.gitapp.cn后台地址:http://travel.gitapp.cn/admin后台管理帐号:用户名:admin123密码:admin123功能介绍平台采用B/S结构,后端采用主流的Springboot框架进行开发,前端采用主流的Vue.js进行开发。整个平台包括前台和后台两个部分。前台功......
  • 枚举: C++和Python实现鸡兔同笼问题
    作者制作不易,关注、点赞、收藏一下吧!目录1.Python实现2.C++实现1.Python实现首先,我们需要输入头和脚的数量:head=int(input("请输入头的数量:"))feet=int(input("请输入脚的数量:"))input()实现输入,int()实现把字符串型(str)换为整型(int)。然后,进行循环......
  • 全自动数字失真度测量仪 音频信号分析仪 音频分析器
    一般而言,声波失真允许范围在10%以内,人耳对5%以下的失真并不敏感。因此,购买音箱时,应避免选择失真度超过5%的产品。谐波分量的方均根值对基波分量之比!SYN6708型失真度仪校准器是一款由西安同步电子科技公司更具《JJG802-2019失真度仪校准器检定规程》精心设计、自行研发生产的一款......