CSS定位

最新推荐文章于 2024-10-13 09:58:25 发布
原创 最新推荐文章于 2024-10-13 09:58:25 发布
· 541 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

本文详细介绍了CSS定位，包括默认情况、相对定位、绝对定位、固定定位fixed和z-index的使用。通过案例和代码展示了如何调整元素位置以及理解z-index的图层概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、默认情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid #C850C0;
            padding: 0px;
        }

        #first{
            background-color: #a0a0a0;
            border: 1px dashed #78c841;
        }

        #second{
            background-color: #FFCC70;
            border: 1px dashed #2a3bc8;
        }

        #third{
            background-color: aqua;
            border: 1px dashed #c84614;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

二、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 相对定位
相对于自己原来的位置进行偏移
-->
    <style>
        body{
            padding: 0px;
        }

        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid #C850C0;
            padding: 0px;
        }

        #first{
            background-color: #a0a0a0;
            border: 1px dashed #78c841;
            position: relative;
            top: -20px;/*相对定位，上下左右*/
            left: 20px;
        }

        #second{
            background-color: #FFCC70;
            border: 1px dashed #2a3bc8;
        }

        #third{
            background-color: aqua;
            border: 1px dashed #c84614;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

效果：
在这里插入图片描述
相对定位：position：relative
相对于原来的位置，进行指定的偏移，对于相对定位来说，他仍然在标准文档流中，原来的位置会被保留。
1、top：上
2、left：左
3、bottom：下
4、right：右

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }

        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: #C850C0;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }

        a:hover{
            background-color: blue;
        }

        .a2 , .a4{
            position: relative;
            left: 200px;
            top: -100px;
        }

        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <a href="#" class="a1">链接1</a>
        <a href="#" class="a2">链接2</a>
        <a href="#" class="a3">链接3</a>
        <a href="#" class="a4">链接4</a>
        <a href="#" class="a5">链接5</a>
    </div>
</body>
</html>

效果：
在这里插入图片描述

三、绝对定位

定位：
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid #C850C0;
            padding: 0px;
            position: relative;
        }

        #first{
            background-color: #a0a0a0;
            border: 1px dashed #78c841;
        }

        #second{
            background-color: #FFCC70;
            border: 1px dashed #2a3bc8;
            position: absolute;
            left: 100px;
        }

        #third{
            background-color: aqua;
            border: 1px dashed #c84614;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

效果：
在这里插入图片描述

四、固定定位fixed

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }

        div:nth-of-type(1){/*绝对定位，相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        div:nth-of-type(2){/*fixed，固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

效果：
在这里插入图片描述

五、z-index

在这里插入图片描述
相当于PS中图层的概念，最低是0，最高无限制。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 400px;
            height: 300px;
        }

        #content{
            width: 400px;
            padding: 0;
            margin: 0;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px solid black;
        }

        ul , li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

    /* 父级元素相对定位*/
        #content ul{
            position: relative;
        }

        .tipText , .tigBg{
            position: absolute;
            width: 400px;
            height: 25px;
            top: 275px;
        }

        .tipText{
            color: white;
            z-index: 999;
        }

        .tigBg{
            background: black;
            opacity: 0.5; /*背景透明度*/
        }
    </style>
</head>
<body>
    <div id="content">
        <ul>
            <li><img src="images/a.jpeg" alt=""></li>
            <li class="tipText">繁华都市，使人驻足</li>
            <li class="tigBg"></li>
            <li>时间：2100-06-05</li>
            <li>地点：大千世界</li>
        </ul>
    </div>
</body>
</html>

效果：
在这里插入图片描述

CSS方块定位的练习
weixin_47556601的博客
02-07 1487
大家好，今天我们来分享一下CSS方块定位的练习 我们这一次我们使用方块练习css相对定位 看图： 这是我们的成品，就是几个超链接方块，你鼠标点上去，它的颜色会由粉色变成蓝色 第一部分的源码; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{
CSS定位详解
最新发布
前端小巷子的博客
05-04 1085
在前端开发中，CSS 定位（positioning）是一个核心概念，它决定了元素在页面上的位置和布局方式。无论是构建复杂的交互界面，还是实现简单的页面排版，CSS 定位都是不可或缺的工具。本文将全面介绍 CSS 中的五种定位方式，帮助你深入理解每种定位方式的特点和应用场景。
练习题 --- 写出5种css定位语法
diebaoliang0628的博客
09-26 220
写出至少5种css语法（每种语法不一样） 转载于:https://www.cnblogs.com/AngesZhu/p/7597079.html
CSS 定位练习
linxianming_的博客
08-08 266
CSS定位练习
html+css定位练习
08-05
这是我自己学习html和css定位（position）时做的练习，仅供初学者学习参考，特别是对定位理解不熟悉的可以参考一下！
Css相对定位小测试题
m0_47801930的博客
03-17 192
HTML代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../CSS/demo03.css"> </head> <body> <div class="father"> ..
前端css定位.pdf
07-28
总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
CSS基础知识四+练习题（盒子绝对定位、固定定位）
2301_80208072的博客
10-13 1078
css基础，盒子模型相对定位
CSS学习笔记之定位练习 3.10
qq_36450483的博客
03-10 683
CSS学习笔记之定位练习
CSS---定位练习经典案例
qq_43766304的博客
03-10 593
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
CSS基础复习之定位
Recar的博客
09-15 545
如题定位定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。流定位 浮动定位 相对定位 绝对定位 固定定位默认是流定位页面上的块元素从上到下一个接一个的排列。 每一个块级元素都会出现在一个新行中 元素框之间的垂直距离是由框的垂直外边距计算出来的。行元素则是在一行中从左到右排列水平布置 不需要从新行开始 可以使用水平内边距，边框和外边框调整他
相对定位和绝对定位的练习
ztt0918的博客
04-26 951
html> html lang="en"> head> meta charset="UTF-8"> title>title> style> #container{ height: 300px; background-color: #ff7300; position: relative;
CSS-06天、定位方式、定位(position)的拓展、淘宝轮播图布局、网页布局总结、元素的显示与隐藏、土豆网鼠标经过显示遮罩
weixin_51353891的博客
05-05 659
学习目标 能够说出 为什么要用定位 能够说出 定位的 4 种分类 能够说出 4 种定位各自的特点 能够说出 为什么常用子绝父相布局 能够写出 淘宝轮播图布局 能够说出 显示隐藏的 3 种方式以及区别 1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？ 场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子. 场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 结论**：要实现以上效果，**标准流.
简单整理下css中的几种定位 大神勿入
wobushiafa的博客
07-26 710
在css中我们常用的定位有以下几种：   1，static（默认定位） 2，relative（相对定位） 3，absolute（绝对定位）  4，fixed（固定定位）   1：static 默认值，按照文档流的布局，布局到哪了是哪里   2： relateive 相对定位，可以通过top left right bottom对元素本身 所在的位置进行微调，注意相对定位的对象是它自己原来的位置
position(五种属性，以及每个属性的特点)
热门推荐
Delicia_Lani的博客
10-28 2万+
1. position: relative;相对定位 1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移） 4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越...
CSS（十）——定位练习（弹出层）
老程的小白博客空间
08-18 786
一般来说，弹出层可应用于很多地方，一些需要页面跳转或者二级菜单不能满足需求以及页面美化等方面都可以使用弹出层来实现。本篇笔记主要记录一个弹出层及其简单的案例，与二级菜单的笔记一样，文中只做页面展示，不涉及动态页面。
CSS练习四(定位练习)
屈帅波的技术博客
05-30 1027
一 导航二维码定位居中 <!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&gt
css定位
03-12
### CSS 定位使用方法 CSS 提供了几种不同的定位方式，每一种都有其特定的应用场景： #### 静态定位 (static) 这是元素的默认定位模式。静态定位下的元素按照正常的文档流排列，不会受到 `top`、`bottom`、`left`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值