20.定位

最新推荐文章于 2024-06-17 19:17:09 发布

yu&2022

最新推荐文章于 2024-06-17 19:17:09 发布

阅读量50

点赞数

分类专栏： CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45623678/article/details/114012238

版权

CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

20.定位

①默认情况

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默认情况</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

css:

div{
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height: 25px;
}
#father{
    border: 2px solid #e98f6b;
}
#first{
    border: 2px solid #000000;
    background-color: green;
}
#second{
    border:2px solid #736be9;
    background-color: green;
}
#third{
    border: 2px solid #dde96b;
    background-color: green;
}

运行结果：
在这里插入图片描述

②相对定位1

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <link rel="stylesheet" href="css/relative.css">
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

css:

div{
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height: 25px;
}
#father{
    border: 2px solid #e98f6b;
}
#first{
    border: 2px solid #000000;
    background-color: green;
    position: relative;
    top:-20px;
}
#second{
    border:2px solid #736be9;
    background-color: green;
    position: relative;
    left: 20px;
}
#third{
    border: 2px solid #dde96b;
    background-color: green;
    position: relative;
    bottom: -20px;
}
/*相对定位
    position:relative
    top:20px;
    left:-10px
    相对于原来的位置，进行指定的偏移，相对定位的话，他仍在标准文档流中，
    原来的位置会被保留
*/

运行结果：
在这里插入图片描述

②相对定位2

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习相对定位</title>
    <link rel="stylesheet" href="css/relative2.css">
</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>

css:

#box{
    width: 300px;
    height: 300px;
    padding: 10px;
    border: 2px solid red;
}
a{
    width: 100px;
    height: 100px;
    text-decoration: none;
    background: yellow;
    display: block;
    line-height: 100px;
    text-align: center;
    color: black;
}
a:hover{
    background: #e98f6b;
}
.a2,.a4{
    position: relative;
    top: -100px;
    left: 200px;
}
.a5{
    position:relative;
    top:-300px;
    left:100px;
}

运行结果：
在这里插入图片描述

③绝对定位

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <link rel="stylesheet" href="css/absolute.css">
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

css:

div{
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height: 25px;
}
#father{
    border: 2px solid #e98f6b;
    position: relative;
}
#first{
    border: 2px solid #000000;
    background-color: blue;
}
#second{
    border:2px solid #736be9;
    background-color: green;
    position: absolute;
    left: 20px;
}
#third{
    border: 2px solid #dde96b;
    background-color: red;
}
/*绝对定位
    position:absolute
    left:20px
    1.没有父级元素定位的前提下，相对于浏览器定位
    2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
    3.在父级元素范围内移动
    相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，
    原来的位置不会被保留
*/

运行结果：
在这里插入图片描述

④固定定位

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="css/fixed.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

css:

body{
    height: 1000px;
}
/*相对于浏览器*/
div:nth-of-type(1){
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    bottom: 0;
    right: 0;
}
/*固定定位*/
div:nth-of-type(2){
    width: 50px;
    height: 50px;
    background: black;
    position: fixed;
    bottom: 0;
    right: 0;
}

运行结果：
在这里插入图片描述

yu&2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20.定位

20.定位①默认情况html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>默认情况</title> <link rel="stylesheet" href="css/style.css"></head><body><div id="father"> &
复制链接

扫一扫