CSS——定位

最新推荐文章于 2022-10-21 14:59:03 发布

书棋06

最新推荐文章于 2022-10-21 14:59:03 发布

阅读量814

点赞数 2

文章标签： python pandas 数据分析

本文链接：https://blog.csdn.net/m0_72975897/article/details/126705592

版权

本文详细介绍了CSS中的四种定位方式：相对定位、绝对定位、固定定位和粘滞定位。相对定位保持元素在文档流中的位置并进行偏移；绝对定位脱离文档流，相对于最近的定位祖先元素定位；固定定位相对于浏览器视口定位，常用于侧边栏和导航；粘滞定位结合了相对定位和固定定位的特点，当元素到达特定位置时变为固定。了解这些定位方式对于实现复杂的网页布局至关重要。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

前面我们学过了浮动，可以有序的讲图片和文字排列放好，那页面布局中还有一些无法用常规手段进行布局的，我们又该用什么方法呢，今天就跟大家分享布局的另一种手段——定位！

定位是一个高级的布局手段，通过left、right、top、bottom设置偏移，一般使用设置二个位置偏移量，一个水平，一个垂直

定位元素：position值非static的元素

提示：以下是本篇文章正文内容，下面案例可供参考

一、定位的四种方法

设置定位position

可选值：static 默认值，不设置定位

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘滞定位

二、使用步骤

1.相对定位

代码如下（示例）：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
      .box {
        width: 600px;
        height: 600px;
        border: 5px solid rgb(56, 56, 56);
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        /* 默认是没有开启定位 */
        /* position: static; */
        /* 开启定位 */
        position: relative;
        /* 设置偏移量 left  right  top bottom */
        left: 100px;
        top: 100px;

      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;
        left: 200px;
        /* top: -200px; */
        bottom: 200px;
      }

      .box3 {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
        left: 400px;
      }

      .s1 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: relative;  
        width: 100px;
        height: 100px;
        left: 100px;
        top: -100px;

      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <span class="s1">我是一个span</span>
    </div>
  </body>
</html>
<!-- 
 文档流   浮动   margin   定位   

 文档流打底，大的布局的用浮动，细节调整用marin、定位

面试题：请你说一说定位？

定位： 更加高级的布局手段
    - 定位指的就是将指定的元素摆放到页面的任意位置
        通过定位可以任意的摆放元素
      - 通过position属性来设置元素的定位
        -可选值：
          static： ['stætik] 默认值，元素没有开启定位
          开启了定位：
            relative： ['relətiv] 开启元素的相对定位
            absolute： ['æbsəlju:t] 开启元素的绝对定位
            fixed：开启元素的固定定位（也是绝对定位的一种）
            sticky： ['stiki] 开启元素的粘滞定位
            
相对定位：
      当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型
      1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
      2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）
      3.相对定位的元素不会脱离文档流
      4.相对定位会使元素提升一个层级
      5.相对定位不会改变元素的性质，块还是块，内联还是内联

偏移量
    当开启了元素的定位（position属性值是一个非static的值）时，
      可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动
      left：元素相对于其定位位置的左侧偏移量，
      right：元素相对于其定位位置的右侧偏移量
      top：元素相对于其定位位置的上边的偏移量
      bottom：元素相对于其定位位置下边的偏移量
    
    通常偏移量只需要使用两个就可以对一个元素进行定位，
      一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
 -->

2.绝对定位

效果图

代码如下（示例）：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .outer {
        width: 600px;
        height: 600px;
        border: 5px solid black;
        position: relative;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        right: 0;
       bottom: 0;
      }
      .box2 {
        width: 250px;
        height: 250px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

<!-- 
当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的包含块定位的
	（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，开启BFC属性
	内联元素可设宽高，块元素的宽度和高度默认都被内容撑开

 包含块：containing block 
-正常情况下：
	离当前元素最近的祖先块元素
-定位情况下：
	离他最近的开启了定位的祖先元素
		如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
		html （根元素，初始包含块） 

-->

3.固定定位

HTML代码：

<div class="tool-bar">
				<ul>
					<li class="open-box">
						<a href="#">
							<img src="./img/工具栏/01.png" class="static">
							<img src="./img/工具栏/1.png" class="hover">
							<span>手机APP</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="./img/工具栏/02.png" class="static">
							<img src="./img/工具栏/2.png" class="hover">
							<span>个人中心</span>
						</a>
					</li>
					<li>
			  	<a href="#">
							<img src="./img/工具栏/03.png" class="static">
							<img src="./img/工具栏/3.png" class="hover">
							<span>售后服务</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="./img/工具栏/04.png" class="static">
							<img src="./img/工具栏/4.png" class="hover">
							<span>人工客服</span>
						</a>
					</li>
					<li>
			 		<a href="#">
							<img src="./img/工具栏/05.png" class="static">
							<img src="./img/工具栏/5.png" class="hover">
							<span>购物车</span>
						</a>
					</li>
				</ul>
			</div>

CSS代码：


/* 首页右侧工具栏 */
.tool-bar {
	width: 84px;
	height: 460px;
	position: fixed;
	bottom: 70px;
	right: 0;
	z-index: 999;
	background-color: white;
}

.tool-bar span {
	color: #9c9c9c;
}

.tool-bar ul {
	width: 100%;
	height: 100%;
}

.tool-bar li {
	width: 100%;
	height: 90px;
	border: 1px solid #f5f5f5;
	border-right: none;
}

.tool-bar li:hover span {
	color: #FF6A00;
}

.tool-bar li:hover .static {
	display: none;
}

.tool-bar li:hover .hover {
	display: block;
}

.tool-bar li img {
	width: 30px;
	height: 30px;
	margin-left: 27px;
	margin-top: 18px;
}

.tool-bar li .hover {
	display: none;
}

.tool-bar li span {
	display: inline-block;
	width: 100%;
	height: 14px;
	font-size: 14px;
	text-align: center;
}

.open-box::before {
	display: none;
	content: '';
	border: 8px solid transparent;
	border-left-color: white;
	position: absolute;
	left: -10px;
	top: 50%;
}

.open-box {
	position: relative;
}

.open-box .app-download {
	display: none;
	position: absolute;
	z-index: 999;
	background-color: white;
	right: 94px;
	padding: 14px;
	width: 100px;
	height: 161px;
	top: 0;
}

.open-box .app-download img {
	display: block;
	width: 100px;
	height: 100px;
	margin: 6px auto;
}

.open-box .app-download span {
	display: inline-block;
	width: 80px;
	margin-left: 10px;
}

.open-box:hover::before {
	display: block;
}

.open-box:hover .app-download span {
	color: #9c9c9c;
}

.open-box:hover .app-download {
	display: block;
}

4.粘滞定位


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>导航条</title>
    <style>
      .box1 {
        margin-top: 50px;
        width: 100%;
        height: 50px;
        background-color: #ccc;
        text-align: center;
        line-height: 50px;
        position: sticky;
        top: 0px;
      }
    </style>
  </head>
  <body style="height: 3000px">
    <!-- 创建导航条的结构 -->
    <div class="box1">导航</div>
    <div>
      常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。
    </div>
  </body>
</html>
<!-- 
   粘滞定位 （一般用于页面导航的吸顶效果)
    -当元素的position属性设置为sticky时，则开启了元素的粘滞定位

    （1）以浏览器为参照物（体现固定定位特点）；
    （2）元素不会脱离文档流，其性质也不会发生变化,占有原来位置（体现相对定位特点）；
　　 （3）粘滞定位可以在元素到达某个位置时，将其固定 
     (4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动 
    -->

总结

static 默认值，元素没有定位

relative 相对定位，相对于自己偏移

特点：不脱离标准文档流，原先位置也占用，设置元素的属性不会改变

absolute：绝对定位，相对于上级的定位元素，设置偏移量

特点：元素脱离标准文档流，宽度由内容撑开，元素性质会变成块元素，

Fixed（侧工具栏，固定导航）：固定定位，相对于浏览器视口，特殊的绝对定位，特点同绝对定位

sticky：粘滞定位，当滚动里包含块的距离相同时，元素就会固定不动

特点：，以浏览器为参照，不脱离标准文档流，原先位置会占用，不改变元素性质，没有达到top值之前正常显示，到达top值之后类似于固定定位，不会随着滚动条滚动。

z-indx 只有定位元素可以设置层级，当设置负值时，常规流、浮动元素会将其覆盖；正值时，值越大，显示层次越高、

注意过度约束：

过度约束：水平方向9个值相加，必须等于其父元素内容区的宽度；

可以是auto值的属性：margin、padding、width

书棋06

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS——定位

今天就跟大家分享布局的另一种手段——定位！定位是一个高级的布局手段，通过left、right、top、bottom设置偏移，一般使用设置二个位置偏移量，一个水平，一个垂直定位元素：position值非static的元素提示：以下是本篇文章正文内容，下面案例可供参考static 默认值，元素没有定位relative 相对定位，相对于自己偏移。
复制链接

扫一扫