CSS基础（四）个人笔记

最新推荐文章于 2024-07-26 08:00:00 发布

jredu1996

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量234

点赞数 2

分类专栏：新手 html5 文章标签： css 移动

本文链接：https://blog.csdn.net/jredu1996/article/details/76604951

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

定位

相对定位

相对定位是如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
用法如下：
position: relative;
left: 30px;
top: 20px;
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container{
            width: 800px;
            height: 300px;
            background-color: #ff6600;
            margin: 0 auto ;
            overflow: hidden;
        }
        #top{
            width:200px;
            height: 100px;
            margin: 5px 5px;
            float: left;
            background-color: aqua;
        }
        #center{
            width:200px;
            height: 100px;
            margin: 5px 5px;
            float: left;
            position: relative;
            top: 20px;
            left: 60px;
            background-color:red;
        }
        #bottom{
            width:200px;
            height: 100px;
            margin: 5px 5px;
            float: left;
            /*相对对位*/
            /*1.相对于自己原来的位置进行定位*/
            /*2.移动后，原来位置不被占用*/
            position: relative;
            top: 20px;
            left: 60px;

            background-color: aqua;
        }
    </style>
    <title>相对定位</title>
</head>
<body>
<div id="container">
    <div id="top"></div>
    <div id="center"></div>
    <div id="bottom"></div>
</div>
</body>
</html>
<!--绝对定位;离他最近的，并且使用定位的-->

结果如下：
这里写图片描述

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
用法如下：
position: absolute;
left: 30px;
top: 20px;
这里写图片描述

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            width: 800px;
            height: 300px;
            background-color: black;
            position: relative;
            overflow: hidden;

        }
        #div2{
            width:600px;
            height: 250px;
            background-color: #c6c7c7;
            margin: 20px 0 0 20px;
            overflow: hidden;


        }
        #div3{
            width:400px;
            height: 150px;
            background-color: cyan;
            margin: 20px 0 0 20px;
            overflow: hidden;

        }
        #top{
            width:100px;
            height: 100px;
            float: left;
            background-color: red;
            position: absolute;
            top:10px;
            left: 10px;
        }
        #center{
            width:100px;
            height: 100px;
            float: left;
            background-color: blue;
        }
        #bottom{
            width:100px;
            height: 100px;
            float: left;
            background-color: chartreuse;
        }
    </style>
    <!--绝对定位：
    1.离他最近的，并且使用定位的父元素 如果没有符合的，使用以border为基准
    2.原本位置可以被占用-->
    <title>绝对定位</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="top"></div>
            <div id="center"></div>
            <div id="bottom"></div>
        </div>
    </div>
</div>
</body>
</html>

结果如下：
这里写图片描述

固定定位

简单来说：不随着滚动条移动而移动
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            height: 1200px;
            background-color: red;
        }
        #backtop{
            height: 50px;
            width: 50px;
            background-color: #ff6600;
            position: fixed;/*固定定位：不随着滚动条移动而移动*/
            bottom: 50px;
            right: 0px;
        }
    </style>
    <title>固定定位</title>
</head>
<body>
<a name="top"></a><!--锚点连接-->
<div id="div1"></div>
<button id="backtop"><a href="#top">返回顶部</a></button>
</body>
</html>

结果：
这里写图片描述

简单应用

如何让一个子div一直在父div的正中间？
1：给父容器添加一个相对定位。
2：给子容器添加绝对定位。
3：top:50%;left :50%.
4:marign-left(width) marign-left(height) 子容器的大小一半。
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #top{
            width: 300px;
            height: 300px;
            background-color: #ff6600;
            margin: 0 auto;
            position: relative;/*相对定位*/
        }
        #center{
            width: 80px;
            height: 100px;
            background-color: aqua;
            position: absolute;/*绝对定位*/
            top: 50%;
            left: 50%;
            margin-top: -50px;/*负边距=本身大小的一半*/
            margin-left: -40px;
        }
    </style>
    <title>Title</title>
</head>
<body>
<!--1：给父容器加相对定位
    2：给子容器添加绝对定位
    3：top left： 50%
    4：margin-top（height）  margin-left(width)：子容器的大小的一半-->
<div id="top">
    <div id="center"></div>
</div>
</body>
</html>

结果如下：
这里写图片描述

jredu1996

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（四）个人笔记

定位相对定位相对定位是如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。用法如下： position: relative; left: 30px; top: 20px; 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边
复制链接

扫一扫