02_32_定位1122

最新推荐文章于 2023-07-11 20:39:34 发布

Cool

最新推荐文章于 2023-07-11 20:39:34 发布

阅读量133

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/lyl0506/article/details/103198112

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

定位
什么是定位：将指定元素摆放到页面的任意位置。
（通过定位可以任意的摆放元素）

通过position属性来定位元素的
相对定位：
当开启元素定位时（position的属性值是一个非static的值）
这个时候，可以通过left、right、top、bottom四个属性来设置元素的偏移量。
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top: 元素相对于其定位位置的上侧偏移量
bottom：元素相对于其定位位置的下侧偏移量
相对定位的特点:
1.当开启元素的相对定位以后，如果不设置偏移量，元素不会发生任何变化。
2.相对定位是相对于元素在文档流中原来的位置进行定位的。
3.相对定位的元素不会脱落文档流。
4.相对定位会让元素提升一个层级

练习：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
            margin: 0;
            padding: 0;
        }
        .box1, .box2, .box3, .box4{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            border: 1px solid red;
        }
        .box2{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .box4{
            position: relative;
            left: 100px;
            top: -100px;
        }
</style>
</head>
<body>

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

小总结：相对定位其实比较简单，就是通过position：relative;
稍微有难度的地方是偏移量的设置。这个时候需要我们建立坐标的概念。
绝对定位：

当position属性设置为absolute时，则开启了元素的绝对定位
1.开启绝对定位，会使元素脱离文档流。
2.开启绝对定位以后，如果元素不设置偏移量，则元素的位置不会发生改变。
3.绝对定位会使元素提升一个层级。
4.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的。
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
小练习：
在这里插入图片描述
固定定位：

position : fixed;
/*
当元素的position属性设置为fixed时候，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点和绝对定位一样
不同的是：
固定定位永远是相对于浏览器窗口进行定位的
固定定位会固定在浏览器的某一个位置，不会随滚动条滚动。
*/

2级菜单（多级导航）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
HTML+CSS 完成静态网页的制作
标签 <ul><li>...</li></ul>项目列表
标签<a>链接
float 浮动
display:block;属性
position属性规定元素的定位
-->
    <style type="text/css">
        *{  margin: 0px;  padding: 0px;  }
        #nav{  background-color: #c5cce5;  width: 600px;  height: 40px;  margin: 50px auto;  }
        ul{list-style: none}
        ul li{float: left;;line-height: 40px;text-align: center;position: relative}
        a{  text-decoration: none;color: #0099cc;display: block;padding: 0 10px;}
        a:hover{background-color:#99cc00;color: #edcc61}
        ul li ul li{ float: none;background-color: #edcc61; margin-top: 2px}
        ul li ul{position: absolute; left: 0px;top: 40px;display: none}
        ul li ul li a:hover{background-color: #9933cc;}
        ul li:hover ul{display: block;}
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaJqueryJquery</a></li>
                <li><a href="#">Jquery</a></li>
                <li><a href="#">js</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">queryJqueryJquery</a></li>
                <li><a href="#">Jquery</a></li>
                <li><a href="#">学习中心1</a></li>
            </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

Cool

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02_32_定位1122

定位什么是定位：将指定元素摆放到页面的任意位置。（通过定位可以任意的摆放元素）通过position属性来定位元素的相对定位：当开启元素定位时（position的属性值是一个非static的值）这个时候，可以通过left、right、top、bottom四个属性来设置元素的偏移量。left：元素相对于其定位位置的左侧偏移量right：元素相对于其定位位置的右侧偏移量top: 元素相...
复制链接

扫一扫