第八节 定位

一. 定位介绍

　　谈到定位，顾名思义，就确定元素的位置，定位分为三种：相对定位、绝对定位、固定定位；分别用 position：relative、position：absolute、position：fixed来表示，它们分别有着不同的用法和使用场景，比如：相对定位通常用来微调元素的位置，用来做字绝父相的父亲；绝对定位用来配合元素动画的移动，用来做子绝父相的儿子；固定定位通常用来做固定在屏幕某处的案例（固定导航栏、返回顶部按钮等）。

子绝父相：如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素 以其父元素为标准来定位。如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。

二. 相对定位

　1.含义： 相对于自己的位置进行移动。 可以简单概括为：不脱标（不脱离标准文档流），老家留坑，形影分离。

 

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             * {8                 margin: 0;9                 padding: 0;
10             }        
11             .box1 {
12                 width: 100px;
13                 height: 100px;
14                 border: 1px solid black;
15                 background-color: red;
16             }
17             
18             .box2 {
19                 width: 100px;
20                 height: 100px;
21                 border: 1px solid black;
22                 background-color: green;
23                 position: relative;
24                 top: 200px;
25                 left: 400px;
26             }    
27             .box3 {
28                 width: 100px;
29                 height: 100px;
30                 border: 1px solid black;
31                 background-color: blue;
32             }
33         </style>
34     </head>
35     <body>
36         <!--一.相对定位 :不脱标，老家留坑，形影分离-->
37         <div class="box1"></div>
38         <div class="box2"></div>
39         <div class="box3"></div>    
40     </body>
41 </html>

   效果：

   

　　2.用于元素位置的微调

 

 

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             .box4{8                 width: 100px;9                 height: 200px;
10                 border: 1px solid black;
11                 float: left;
12             }
13             body input{
14                 position: relative;
15                 top: 100px;
16                 left: 50px;
17             }
18         </style>
19     </head>
20     <body>
21         <!--一.元素的微调-->    
22         <div class="box4"></div>
23         <input type="button"  value="来微调我呀" />
24     </body>
25 </html>

 

　　效果：

　　3.子绝父相的长辈，不一定是父辈（详见下面绝对定位的介绍）

 

三. 绝对定位 

　1.性质：绝对定位是脱标的，所以只要元素进行绝对定位了，无论是行内元素还是块级元素，都可以设置宽高了，不需要再设置display:block了。​​​​​​​

 

 1 <!DOCTYPE html>2 <html>3 4     <head>5         <meta charset="UTF-8">6         <title></title>7         <style type="text/css">8             * {9                 margin: 0;
10                 padding: 0;
11             }
12             
13             .box1 {
14                 width: 200px;
15                 height: 200px;
16                 border: 1px solid pink;
17                 background-color: red;
18             }
19             
20             .box2 {
21                 width: 200px;
22                 height: 200px;
23                 border: 1px solid pink;
24                 background-color: green;
25                 position: absolute;
26                 top: 200px;
27                 left: 300px;
28             }
29             
30             .box3 {
31                 width: 200px;
32                 height: 200px;
33                 border: 1px solid pink;
34                 background-color: blue;
35             }
36             
37             .sp1 {
38                 border: 1px solid black;
39                 width: 200px;
40                 height: 200px;
41             }
42             
43             .sp2 {
44                 border: 1px solid black;
45                 width: 200px;
46                 height: 200px;
47                 position: absolute;
48                 top: 100px;
49                 left: 100px;
50             }
51         </style>
52     </head>
53     <body>
54         <!--一.绝对定位的盒子脱标1-->
55         <div class="box1">1</div>
56         <div class="box2">2</div>
57         <div class="box3">3</div>
58         <!--二.绝对定位的盒子脱标2-->
59         <span class="sp1">哈哈1</span>
60         <!--绝对定位以后，就可以设置宽和高了-->
61         <span class="sp2">哈哈2</span>
62     </body>
63 
64 </html>

复制代码

　2.绝对定位参考点1-当没有父盒子或父盒子中没有定位属性时，这时以body作为参考点

   经典面试题：

 

　3.绝对定位参考点2-子绝父相

   一个绝对定位的元素，在有父元素或爷爷或以上元素包裹时，以离他最近的有定位（相对、绝对、固定）的元素当做参考。

 

   

 

 

  4.居中的性质

　　绝对定位以后，标准文档流中的居中方式：margin：0 auto ,失效了，所有要采用一个新的公式：left:50%， margin-left: 负的宽度的一半。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             .box1 {8                 width: 400px;9                 height: 60px;
10                 background-color: green;
11                 position: absolute;
12                 left: 50%;
13                 top: 0;
14                 margin-left: -200px;
15             }
16         </style>
17     </head>
18     <body>
19         <!--绝对定位以后，标准文档流中的居中方式：margin：0 auto ,失效了
20         所有要采用一个新的公式：left:50%  margin-left: 负的宽度的一半-->    
21         <div class="box1"></div>
22     </body>
23 
24 </html>

复制代码

　四. 固定定位 

　　固定定位是相对浏览器窗口进行定位，无论窗口怎么移动，固定定位的盒子相对于窗口的位置都不变.

     1. 补充固定导航栏案例js版

复制代码

 1 <!DOCTYPE html>2 <html>3 4     <head>5         <meta charset="UTF-8">6         <title></title>7         <style>8             * {9                 margin: 0;
10                 padding: 0
11             }
12             
13             img {
14                 vertical-align: top;
15             }
16             
17             .main {
18                 margin: 0 auto;
19                 width: 1000px;
20                 margin-top: 10px;
21             }
22             
23             .fixed {
24                 position: fixed;
25                 top: 0;
26                 left: 0;
27             }
28         </style>
29         <script src="00-JS/myJs.js" type="text/javascript" charset="utf-8"></script>
30         <script type="text/javascript">
31             window.onload = function() {
32                 var nav = $('Q-nav');
33                 var navTop = nav.offsetTop;
34                 window.onscroll = function() {
35                     if(Scroll().top >= navTop) {
36                         nav.className = "nav fixed";
37                     } else {
38                         nav.className = "nav";
39                     }
40                 };
41             };
42         </script>
43     </head>
44     <body>
45         <div class="top" id="top">
46             <img src="00-Image/top.png" alt="" />
47         </div>
48         <div class="nav" id="Q-nav">
49             <img src="00-Image/nav.png" alt="" />
50         </div>
51         <div class="main">
52             <img src="00-Image/main.png" alt="" />
53         </div>
54     </body>
55 
56 </html>

复制代码

     2. 回到顶部案例JQuery版

复制代码

 1 <!DOCTYPE html>2 <html>3 4     <head>5         <meta charset="UTF-8">6         <title></title>7         <style type="text/css">8             #div1 {9                 height: 2000px;
10             }
11             
12             .box1 {
13                 width: 50px;
14                 height: 50px;
15                 background-color: pink;
16                 position: fixed;
17                 bottom: 20px;
18                 right: 20px;
19                 cursor: pointer;
20                 display: none;
21             }
22         </style>
23         <script src="../../00-Lib/jquery-1.11.1.min.js"></script>
24         <script type="text/javascript">
25             $(function() {
26                 //1.滚动事件
27                 $(window).on('scroll', function() {
28                     var myTop = $(document).scrollTop();
29                     if(myTop > 0) {
30                         $('.box1').show();
31                     } else {
32                         $('.box1').hide();
33                     }
34                 });
35                 //2.回到顶部事件
36                 $('.box1').on('click',function () {
37                     $(document).scrollTop(0);
38                 });
39             });
40         </script>
41     </head>
42 
43     <body>
44         <div id="div1">
45             hahah
46         </div>
47         <div class="box1">
48         </div>
49     </body>
50 
51 </html>

复制代码

　 五. Z-Index  

　● z-index值表示谁压着谁。数值大的压盖住数值小的。

   ● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

   ● z-index值没有单位，就是一个正整数。默认的z-index值是0。

   ● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就能压住别人。定位了的元素，永远能够压住没有定位的元素。

复制代码

 1 <!DOCTYPE html>2 <html>3     <head>4         <meta charset="UTF-8">5         <title></title>6         <style type="text/css">7             .box1 {8                 width: 200px;9                 height: 200px;
10                 background-color: pink;
11                 position: absolute;
12                 top: 400px;
13                 left: 200px;
14                 z-index: 10;
15             }
16             
17             .box2 {
18                 width: 200px;
19                 height: 200px;
20                 background-color: greenyellow;
21                 position: absolute;
22                 top: 420px;
23                 left: 250px;
24                 z-index: 9;
25             }
26         </style>
27     </head>
28     <body>
29         <!--● z-index值表示谁压着谁。数值大的压盖住数值小的。
30             ● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
31             ● z-index值没有单位，就是一个正整数。默认的z-index值是0。
32             ● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就能压住别人。定位了的元素，永远能够压住没有定位的元素。-->
33 
34         <div class="box1"></div>
35         <div class="box2"></div>
36     </body>
37 
38 </html>

复制代码

    z-index的从父现象：父亲之间pk，a的父亲比b的父亲的z-index大，那么b的z-index比a大无效

复制代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">3 <head>4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">5     <title>Document</title>6     <style type="text/css">7         *{8             margin: 0;9             padding: 0;
10         }
11         .linzhiying{
12             width: 200px;
13             height: 200px;
14             background-color: blue;
15             position: relative;
16             z-index: 10;
17         }
18         .tianliang{
19             width: 200px;
20             height: 200px;
21             background-color: orange;
22             position: relative;
23             z-index: 9;
24         }
25         .kimi{
26             width: 60px;
27             height: 60px;
28             background-color: green;
29             position: absolute;
30             top: 300px;
31             left: 450px;
32             z-index: 454;
33         }
34         .cindy{
35             width: 60px;
36             height: 60px;
37             background-color: pink;
38             position: absolute;
39             top: 130px;
40             left: 490px;
41             z-index: 45454;
42         }
43     </style>
44 </head>
45 <body>
46     <!--z-index的从父现象：父亲之间pk，a的父亲比b的父亲的z-index大，那么b的z-index比a大无效-->
47     <div class="linzhiying">
48         <p class="kimi"></p>
49     </div>
50     <div class="tianliang">
51         <p class="cindy"></p>
52     </div>
53 </body>
54 </html>

复制代码

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/438458.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

使用string对象的split()方法能够处理。正则表达式定义&#xff1a; split() 方法用于把一个字符串分割成字符串数组。数组使用方法以下&#xff1a;cdnstringObject.split(separator,howmany)对象参数描述&#xff1a;blogseparator 必需。字符串或正则表达式&#xff0c;从该…
阅读更多...
CSS块级元素与行内元素的区别和联系

CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素&#xff0c;能容纳其他块元素或内联元素。块元素就好比一个四方块&#xff0c;可以放其他的四方块&#xff0c;并可以呈现在页面上任何地方。 默认情况下块元素&#xff0c;是独占一行的常见的块元素&#xff1a;div、p、h1-h6…
阅读更多...
联想台式计算机驱动程序,联想键盘驱动程序

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题&#xff0c;包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…
阅读更多...
JS入门

JS入门

一. 总体介绍 结合近半年来前端的项目的经验&#xff0c;这里梳理一下JS常用知识&#xff0c;方便自己日后温习查找&#xff0c;同时给广大JS入门者提供一些帮助&#xff0c;文章中如有错误&#xff0c;欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…
阅读更多...
联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(AssociativeMemory, AM) 是人脑的重要认知功能之一。例如, 听…
阅读更多...
第二节 DOM-Document对象

第二节 DOM-Document对象

一. 整体介绍 这里介绍DOM对象中的Document对象。 何为Document对象&#xff1f;每个载入浏览器的HTML文档都会成为Document对象&#xff0c;Document对象可以帮助我们对所有的HTML文档进行访问。 任何一个对象都会有属性和方法&#xff0c;当然Document对象也不例外&#xff0…
阅读更多...
计算机专业的情书,【实用】大学各专业表白情书，你能看懂几个

计算机专业的情书,【实用】大学各专业表白情书，你能看懂几个

原标题&#xff1a;【实用】大学各专业表白情书&#xff0c;你能看懂几个大学各专业表白情书的正确打开方式每每看到朋友圈秀恩爱时就会用知识摆脱烦恼刷刷微博浏览网页学学专业技能......但是&#xff01;居然连专业都不放过表白还那么高调来感受感受吧……音乐专业每次看着你…
阅读更多...
第三节 DOM-Element对象

第三节 DOM-Element对象

一. 整体介绍 这里介绍DOM对象中Element对象。 那么何为Element对象呢&#xff1f;Element对象就是HTML元素&#xff0c;Element对象包括&#xff1a;元素节点、文本节点、属性节点。 下面利用一张图来总体概括一下Element对象包含的知识点。 二. 知识梳理 一张图胜似千言万语…
阅读更多...
w8计算机配置要求,win8配置要求 详细介绍

w8计算机配置要求,win8配置要求 详细介绍

随着win8系统的不断完善&#xff0c;现在已经越来越多用户投身到win8的行列之中&#xff0c;越来越多的人使用win8也代表着出现了新的问题&#xff0c;很多用户考虑到win系统对电脑的硬件要求有所不同&#xff0c;所以有些电脑无法完美的运行win8系统&#xff0c;究竟要怎么样才…
阅读更多...
C#多线程编程系列（一）- 简介

C#多线程编程系列（一）- 简介

目录 系列大纲一、前言二、目录结构四、章节结构五、相关链接系列大纲# 目前只整理到第二章&#xff0c;线程同步&#xff0c;笔者后面会慢慢更新&#xff0c;争取能把这本书中精华的知识都分享出来。C#多线程编程系列&#xff08;一&#xff09;- 简介C#多线程编程系列&…
阅读更多...
计算机论文答辩注意哪些问题,计算机专业论文答辩（准备和注意事项）

计算机论文答辩注意哪些问题,计算机专业论文答辩（准备和注意事项）

随着社会的不断发展&#xff0c;计算机的应用在中国越来越普遍&#xff0c;在互联网、通信、多媒体等领域都有应用&#xff0c;对于计算专业的同学&#xff0c;毕业时&#xff0c;除了想了解毕业论文如何写作&#xff0c;还有就是论文的答辩准备&#xff0c;下面我们就为大家重…
阅读更多...
C#多线程编程系列（二）- 线程基础

C#多线程编程系列（二）- 线程基础

目录 C#多线程编程系列&#xff08;二&#xff09;- 线程基础 1.1 简介1.2 创建线程1.3 暂停线程1.4 线程等待1.5 终止线程1.6 检测线程状态1.7 线程优先级1.8 前台线程和后台线程1.9 向线程传递参数1.10 C# Lock关键字的使用1.11 使用Monitor类锁定资源1.12 多线程中处理异常…
阅读更多...
C#多线程编程系列（三）- 线程同步

C#多线程编程系列（三）- 线程同步

目录 1.1 简介1.2 执行基本原子操作1.3 使用Mutex类1.4 使用SemaphoreSlim类1.5 使用AutoResetEvent类1.6 使用ManualResetEventSlim类1.7 使用CountDownEvent类1.8 使用Barrier类1.9 使用ReaderWriterLockSlim类1.10 使用SpinWait类参考书籍笔者水平有限&#xff0c;如果错误…
阅读更多...
C#多线程编程系列（四）- 使用线程池

C#多线程编程系列（四）- 使用线程池

目录 1.1 简介1.2 在线程池中调用委托1.3 向线程池中放入异步操作1.4 线程池与并行度1.5 实现一个取消选项1.6 在线程池中使用等待事件处理器及超时1.7 使用计时器1.8 使用BackgroundWorker组件参考书籍笔者水平有限&#xff0c;如果错误欢迎各位批评指正&#xff01;1.1 简介…
阅读更多...
C#线程模型脉络

C#线程模型脉络

今天在看同事新买到的《C#本质论 Edition 4》的时候&#xff0c;对比下以前Edtion3的新特性时&#xff0c;针对Async/Await关键字时发现对一些线程方面的定义还理解的不是很透彻&#xff0c;脉络还不是很清晰&#xff0c;这样有了本文&#xff0c;希望对有同样困惑的朋友有些帮…
阅读更多...
“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

既然要学.NET&#xff0c;就要先认识认识她&#xff0c;我不喜欢大段大段文字的东西&#xff0c;自己通过理解&#xff0c;画个图&#xff0c;来看看.NET的沉鱼落雁&#xff0c;闭月羞花之容。 最下层蓝色部分是.NET Framework的基础&#xff0c;也是所有应用软件的基础。.NET …
阅读更多...
QQ炫舞手游显示进入服务器失败6,qq炫舞手游进不去怎么办 游戏进不去方法详解[多图]...

QQ炫舞手游显示进入服务器失败6,qq炫舞手游进不去怎么办 游戏进不去方法详解[多图]...

qq炫舞手游是新出的游戏&#xff0c;在近期非常的火爆&#xff0c;不过有不少的玩家都有进不了游戏的情况&#xff0c;下面安族小编给大家介绍一下游戏进不去方法详解。qq炫舞手游玩不了解决方法1.第一种方式就是内测还没有开启咯&#xff0c;所以玩家一般都是下载不到包的&…
阅读更多...
那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)

那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)

一. 背景 在刚接触开发的头几年里&#xff0c;说实话&#xff0c;根本不考虑多线程的这个问题&#xff0c;貌似那时候脑子里也有没有多线程的这个概念&#xff0c;所有的业务都是一个线程来处理&#xff0c;不考虑性能问题&#xff0c;当然也没有考虑多线程操作一条记录存在的并…
阅读更多...
asp.net mvc webform和razor的page基类区别

asp.net mvc webform和razor的page基类区别

接触过asp.net mvc的都知道&#xff0c;在传统的webform的模式下&#xff0c;page页面的基类是这样声明的&#xff1a; <% Page Language"C#" MasterPageFile"~/Views/Shared/Site.Master" Inherits"ViewPage" %> 如果是partial view的话…
阅读更多...
frameset ajax,js控制frameSet示例

frameset ajax,js控制frameSet示例

js控制frameSet示例1&#xff1a;js修改frameset的cols属性来达到修改各个页面所占的宽高&#xff0c;例如隐藏当前frame页。复制代码 代码如下:window.parent.document.getElementsByTagName("frameset")[0].cols"0,*";2&#xff1a;js调用其他frame页面的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023