第八节 定位

一. 定位介绍

　　谈到定位，顾名思义，就确定元素的位置，定位分为三种：相对定位、绝对定位、固定定位；分别用 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.tpcf.cn/news/438458.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈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;包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…
阅读更多...
CSS块级元素、内联元素概念

CSS块级元素、内联元素概念

CSS文档流与块级元素&#xff08;block&#xff09;、内联元素&#xff08;inline&#xff09;&#xff0c;之前翻阅不少书籍&#xff0c;看过不少文章&#xff0c; 看到所多的是零碎的CSS布局基本知识&#xff0c;比较表面。看过OReilly的《CSS权威指南》&#xff0c;发现里面…
阅读更多...
带字母的计算机在线使用,ASCII，进位制在线转换工具

带字母的计算机在线使用,ASCII，进位制在线转换工具

APP说明ASCII(American Standard Code for Information Interchange&#xff0c;美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统&#xff0c;主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统&#xff0c;并等同于国际标准ISO/IEC 646。十进制&am…
阅读更多...
JS入门

JS入门

一. 总体介绍 结合近半年来前端的项目的经验&#xff0c;这里梳理一下JS常用知识&#xff0c;方便自己日后温习查找&#xff0c;同时给广大JS入门者提供一些帮助&#xff0c;文章中如有错误&#xff0c;欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…
阅读更多...
在微型计算机中 存储容量为1kb 指的是,2016年计算机一级考试模板

在微型计算机中 存储容量为1kb 指的是,2016年计算机一级考试模板

​​红色标题的是正确答案18)下说法中&#xff0c;正确的是A)软盘片的容量远远小于硬盘的容量B)硬盘的存取速度比软盘的存取速度慢C)软盘是由多张盘片组成的磁盘组D)软盘驱动器是唯一的外部存储设备19)1KB 存储容量能存储的汉字内码的个数是A)128 B)256C)…
阅读更多...
第一节 从面向对象的角度重新认识JS世界

第一节 从面向对象的角度重新认识JS世界

一. 背景 距离上一篇JS文章已经20天&#xff0c;经重新总结发现&#xff0c;上一篇概况的有点浅显&#xff0c;适合初学js的入门了解&#xff0c;但对于已经学习js一段时间的人&#xff0c;或者是想系统的了解JS体系&#xff0c;接下来的文章可能会更有帮助。 该系列博客的书写…
阅读更多...
联想记忆计算机网络,什么是双向联想记忆神经网络

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

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(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对象包含的知识点。 二. 知识梳理 一张图胜似千言万语…
阅读更多...
计算机维修案例分析题,14-15年春季高考信息技术题(组装维修部分)

计算机维修案例分析题,14-15年春季高考信息技术题(组装维修部分)

2014年山东省春季高考信息技术类组装维修试题一、选择题(每小题2分)36.计算机硬件系统的核心部件是A&#xff0e;主板B&#xff0e;CPU C&#xff0e;内存D&#xff0e;硬盘37.北桥芯片的功能不包括A&#xff0e;对CPU类型和主频的支持B&#xff0e;对ECC纠错的支持C&#xff0…
阅读更多...
第四节Dom-Attribute对象

第四节Dom-Attribute对象

Dom-Attribute对象 Dom-Event对象
阅读更多...
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 多线程中处理异常…
阅读更多...
南京大学计算机考研分数线2021,南京大学2021年硕士研究生复试基本分数线

南京大学计算机考研分数线2021,南京大学2021年硕士研究生复试基本分数线

一、学术学位报考学科门类总分第1门第2门第3门第4门备注哲学[01]33555559090各院(系、所)综合考虑生源情况、本学科、专业人才培养特点及复试比例要求&#xff0c;根据学校复试基本分数线&#xff0c;可上调本院(系、所)复试的成绩要求。经济学[02]39060609090法学[03]34550509…
阅读更多...
计算机文化基础论述题,计算机文化基础复习题六

计算机文化基础论述题,计算机文化基础复习题六

计算机文化基础复习题第六套答案仅供参考一、单项选择题(每题1分&#xff0c;共30分)1、网络信息安全的技术特征中 &#xff0c;( )是系统安全的最基本要求之一&#xff0c;是所有网络信息系统建设和运行的基本目标。A、稳定性 B、运行速度 C、可靠性 D、运行质量2、要在FrontP…
阅读更多...
最新文章

Copyright @ 2022~2023