精华内容
下载资源
问答
  • position定位有几种?各什么特点?
    千次阅读
    2019-08-06 09:24:35

    这里是修真院前端小课堂,每篇分享文从

    【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

    八个方面深度解析前端知识/技能,本篇分享的是:

    【position定位有哪几种?各有什么特点?】

    【修真院CSS小课堂】

    position定位有哪几种?各有什么特点?

    开场语:

    大家好,我是IT修真院上海分院第10期的学员林璇,今天给大家分享一下,修真院CSS任务四

    position定位有哪几种?各有什么特点?

    (1)背景介绍:

    定位分为三种

    相对定位

    让元素让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)。

    相对定位不脱标:老家留坑,别人不会把它的位置挤走。

    就是说,相对定位的真实位置还在老家,只不过影子出去了,可以到处飘。

    绝对定位

    定义横纵坐标。原点在父容器的左上角或左下角。

    绝对定位脱标,绝对定位的盒子脱离了标准文档流。

    绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block就可以设置宽、高了。

    固定定位

    是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。

    (2)知识剖析:

    相对定位

    有什么作用?

    相对定位有坑,所以如果需要做一般不用于做“压盖”效果(把一个div放到另一个div之上)

    做绝对定位的参考,子绝父相

    绝对定位

    一个绝对定位的元素,如果父辈元素中也出现了已定位

    无论是绝对定位、相对定位,还是固定定位)的元素

    那么将以父辈这个元素,为参考点。

    子绝父相”有意义:这样可以保证父亲没有脱标,儿子脱标在父亲的范围里面移动。

    固定定位

    顶部导航

    我们经常能看到固定在网页顶端的导航条,可以用固定定位来做

    (3)常见问题:

    有的时候为什么会出现透明的情况呢?

    (4)解决方案:

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

    有如下特性:

    (1)属性值大的位于上层,属性值小的位于下层。

    (2)z-index值没有单位,就是一个正整数。默认的z-index值是0。

    (3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

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

    (5)编码实战:

    z-index:1;如果说在运用种,有1和2 的情况,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。

    (6)拓展思考:

    让绝对定位中的盒子居中

    我们知道,如果想让一个标准流中的盒子居中(水平方向看)

    可以将其设置margin: 0 auto属性。

    可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中,可以这样做

    left:50%; margin-left:负的宽度的一半

    (7)参考文献:

    1:生命壹号博客

    2:B站视频:盒子模型

    (8)更多讨论:

    1:问题:Fixed 定位在 IE7 和 IE8 下需要描述什么才会支持呢?

    回答:1.!DOCTYPE 才能支持。

    2:问题:2.absolute 定位的元素和其他元素重叠吗?

    回答:2.会重叠的

    3:问题:relative在没有设置宽度的情况下,宽度是多少呢?

    回答:3.宽度是整个浏览器的宽度。

    (9)鸣谢:

    感谢王刚师兄,此教程是在他们之前技术分享的基础上完善而成。

    (10)结束语:

    今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

    更多相关内容
  • 在 html 中设置锚点定位我知道的有几种方法在此和大家分享一下 1使用 id 定位 代码如下 : <a href=#1F" name="1F> 锚点 1</a> <div name="1F> <p> 11111111111 </br> 11111111111 <...
  • 在html中设置锚点定位我知道的有几种方法在此和大家分享一下 1 使用id定位 代码如下 & lt;a href=#1F" name="1F> 锚点 1& lt;/a>该文档文档投稿赚钱网作品版权所有违责必纠 & lt;div name="1F> <p >...
  • 本文先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案。 1.无依赖的absolute定位 在网络上,对absolute存在这样一个误解,认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能...
  • HTML的几种定位方式

    千次阅读 2020-09-17 20:08:36
    HTML中的几种定位方式 相对定位 绝对定位 固定定位 定位详解 定位也是用来布局的,它由两部分组成:定位=定位模式 + 边偏移 边偏移 边偏移属性 示例 描述 top top:80px 顶端偏移量,定义元素相对于其父...

    HTML中的几种定位方式

    1. 相对定位
    2. 绝对定位
    3. 固定定位

    定位详解

    • 定位也是用来布局的,它由两部分组成:定位=定位模式 + 边偏移

    边偏移

    边偏移属性示例描述
    toptop:80px顶端偏移量,定义元素相对于其父元素上边线的距离
    bottombottom:80px底部偏移量,定义元素相对于其父元素下边线的距离
    leftleft:80px左侧偏移量,定义元素相对于其父元素左边线的距离
    rightright:80px右侧偏移量,定义元素相对于其父元素右边线的距离

    定位模式(position)

    语法

    选择器{position:属性值;}
    

    定位模式是有不同的分类,在不同的情况下我们用到不同的定位方式。

    语义
    static静态定位
    relative相对定位
    absolute绝对定位
    fixed固定定位

    静态定位(static)----了解

    • 静态定位时元素的默认定位方式,无定位的意思。他相当于border里面的none,不要定位的时候用
    • 静态定位 按照标准流特性摆放位置,他没有边偏移。
    • 静态定位在布局时我们几乎不用

    相对定位(relative)----重要

    • 相对定位是元素相对于它 原来在标准流中的位置来说的。(自恋型)
    相对定位的特点(重点):
    1. 相对于自己原来在标准流中位置来移动的
    2. 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。

    绝对定位(absolute)----重要

    • 绝对定位是元素以带有定位的父级元素来移动位置(俗称拼爹型)
    1. 完全脱标——完全不占位置
    2. 父元素没有定位,则以浏览器为准定位(Document文档)。
    3. 父元素要有定位:将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
    • 绝对定位的特点(重点)
    1. 绝对是以带有定位的父级元素来移动位置(俗称拼爹)如果父级都没有定位,则以浏览器文档为准移动位置
    2. 不保留原来的位置,完全是脱标的。
    3. 因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用

    定位口诀——子绝父相----子级是绝对定位,父级是相对定位

    为什么在布局时,子集元素使用绝对定位时,父级元素就要用相对定位呢?

    固定定位(fixed)—重要

    • 固定定位时绝对定位的一种特殊形式(认死理型)如果说绝对定位是一个矩形那么固定定位就类似于正方形
    1. 完全脱标——完全不占位置
    2. 只认浏览器的可视窗口——浏览器可视窗口 + 边偏移属性 来设置元素的位置
      • 跟父元素没有任何的关系;单独使用的
      • 不随滚动条滚动。

    定位小结

    定位模式是否脱标占有位置移动位置基准模式转换(行内快)使用情况
    静态static不脱标,正常模式正常模式不能几乎不用
    相对定位relative不脱标,占有位置相对自身位置发生偏移不能基本单独使用
    绝对定位absolute完全脱标,不占有位置相对于定位父级移动位置要和定位父级元素搭配使用
    固定定位完全脱标,不占有位置相对于浏览器移动位置单独使用,不需要父级

    注意:

    1.边偏移需要和定位模式联合使用,单独使用无效

    2.top和bottom不用同时使用

    3.left和right不要同时使用

    展开全文
  • 3.absolute:绝对定位,以最近一级的有定位的祖先元素为参考点进行定位(static除外),开启绝对定位原来的位置不会被保留,会脱离文档流,会影响后面元素的布局。 4.fixed:固定定位,固定在浏览器可视区的某个...

    1.static(静态):元素的默认值,没有定位,遵循正常的文档流对象

    2.relative:相对定位,相对于元素原来的位置进行定位,相对定位原来的位置会被保留不会脱离文档流

    不会影响后面元素的布局。

    3.absolute:绝对定位,以最近一级的有定位的祖先元素为参考点进行定位(static除外),开启绝对定位原来的位置不会被保留,会脱离文档流,会影响后面元素的布局。

    4.fixed:固定定位,固定在浏览器可视区的某个位置

    展开全文
  • css中常用几种定位属性

    千次阅读 2020-02-29 20:49:14
    css常用定位属性,静态定位、绝对定位、相对定位、固定定位 下面来逐一介绍 1. static (静态定位) 默认值,没有定位。也就是按照文档的书写布局自动分配在一个合适的地方。不脱离文档流。在静态定位状态下...

    **

    position 定位

    **定位是在页面布局中非常重要
    css有三种基本的定位机制:普通流、浮动流、定位流。
    css常用的定位属性有四种,静态定位、绝对定位、相对定位、固定定位
    下面来逐一介绍

    1. static (静态定位)

    默认值,没有定位。也就是按照文档的书写布局自动分配在一个合适的地方。不脱离文档流。在静态定位状态下,不能配合top、bottom、left、right来改变元素的位置。
    (可以用于取消元素之前的定位设置。)

    **2. relative(相对定位)

    **相对定位是将元素对于它在标准流中的位置进行定位,通过设置边移属性top、bottom、left、right,使指定元素相对于其正常位置进行偏移。如果没有定位偏移量,对元素本身没有任何影响。
    不使元素脱离文档流,空间会保留,不影响其他布局。
    经常与z-index属性进行层次分级。

    <style>
    				
    				.box1{
    					width:200px;
    					height:100px;
    					background:skyblue;
    					margin:10px;
    				}
    				.box2{
    					width:200px;
    					height:100px;
    					background:pink;
    					margin:10px;
    					position:relative;/*相对定位*/
    					left:100px;/*向右偏移100px*/
    					top:-50px;/*向上偏移50px*/
    				}
    				.box3{
    					width:200px;
    					height:100px;
    					background:yellowgreen;
    					margin:10px;
    				}
    			</style>
    
    <body>
    		<div class="box1">1</div>
    		<div class="box2">2</div>
    		<div class="box3">3</div>
    				
    	</body>
    	
    
    


    没使用想对定位之前

    相对于原来的位置向右偏移了100px,向上偏移50px
    虽然它的位置发送变化,但它在标准文档流中的原位置依然保留

    z-index (叠放次序)

    z-index是设置元素的堆叠顺序,所有元素都有z-index属性,具有权值比较,默认权值是0,哪个元素的权值越大,哪个元素就被堆叠到上面
    比如:z-index:2
    后面数字一定不能加单位

    3. absolute(绝对定位)

    脱离文档流,不占页面空间。如果有定义祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移,如果有多个定位祖先元素,相对于距离它最近的祖先元素进行偏移。
    如果该元素为内联元素,则会变成块级元素,可直接设置其宽和高的值(让内联具备快特性);
    如果该元素为块级元素,使其宽度根据内容决定。(让块具备内联的特性)
    经常与z-index属性进行层次分级。

    <style>
    				.wrap{
    					width:500px;
    					height:400px;
    					border: 2px solid red;
    				}
    				.box1{
    					width:200px;
    					height:100px;
    					background:skyblue;
    					margin:10px;
    				}
    				.box2{
    					width:200px;
    					height:100px;
    					background:pink;
    					margin:10px;
    					position:absolute;/*绝对定位*/
    					left:100px;/*向右偏移100px*/
    					top:30px;/*向下偏移30px*/
    				}
    				.box3{
    					width:200px;
    					height:100px;
    					background:yellowgreen;
    					margin:10px;
    					
    				}
    			</style>
    			<div class="wrap">
    		       <div class="box1">1</div>
    		       <div class="box2">2</div>
    		       <div class="box3">3</div>
    	       </div>		
    

    在这里插入图片描述
    将第二个设置为绝对定位后,它脱离了文档流可以定位到页面的任何地方,在标准文档流中的原有位置会空出来,所以第三个会排到第一个下面。第二个相对于它的父元素向右偏移100,向下偏移30。

    4. fixed(固定定位)

    固定定位与绝对定位类似,都会脱离标准文档流,区别在于参照物不同,固定定位参照浏览器窗口,当用户拖动滚动条时,固定定位的元素将保持相对于浏览器窗口不变的位置。
    经常与z-index属性进行层次分级。

    <style>
    				.wrap{
    					width:400px;
    					height:1000px;
    					border: 2px solid red;
    				}
    				.box1{
    					width:70px;
    					height:60px;
    					background:yellow;
    					position:fixed;/*固定定位*/
    					left:100px;
    					top: 50px;
    				}
    				
    			</style>
       <div class="wrap">
    		<p>约客</p>
    		<p>黄梅时节家家雨</p>
    		<p>青春池塘处处蛙</p>
    		<p>有约不来过夜半</p>
    		<p>闲敲棋子落灯花</p>
    		<p>约客</p>
    		<p>黄梅时节家家雨</p>
    		<p>青春池塘处处蛙</p>
    		<p>有约不来过夜半</p>
    		<p>闲敲棋子落灯花</p>
    		...
    </div>		
    	<div class="box1">固定不变</div>
    

    在这里插入图片描述

    在这里插入图片描述
    向下拖动滚动条时“固定定位”黄色的盒子在窗口中的位置不会发生变化。

    展开全文
  • CSS的几种定位详解

    万次阅读 多人点赞 2018-08-10 10:50:50
    CSS中的定位使用来布局的熟练应用对页面美化很好的帮助,下面就进行详细介绍:定位分为静态定位,相对定位,绝对定位,固定定位这四定位有不同的参数,例如:left、right、top、bottom、z-index等。...
  • HTML中的几种定位方式

    万次阅读 多人点赞 2016-09-12 15:47:27
    当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。 ...
  • 作为一个公司的技术部门,就会涉及到一些文档的对接,包括但不仅局限于 需求文档 会议记录 接口文档 切图标注 对接的部门,包括但不仅局限于 前端和后端 移动端和后端 设计和前端 设计和移动端 产品经理和...
  • position定位有几种?各什么特点

    千次阅读 2019-07-17 10:06:45
    【position定位有几种?各什么特点 】 一、背景介绍 position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一...
  • 一、常见几种页面布局 静态布局 定位布局 流式布局 弹性布局 自适应布局 响应式布局 圣杯、双飞翼、栅格布局 1、静态布局 特点: 传统的网页布局形式,页面上的所有元素的尺寸均使用px(像素)作为单位,当屏幕...
  • css中的几种定位详解

    千次阅读 多人点赞 2019-06-05 20:46:05
    上课老师讲的几种关于css的定位,讲得很详细,整理了文档,老是翻文档觉得很不方便,所以想以后养成写博客的习惯,记录一些觉得总结得很好的东西。 相对定位不会脱离文档流 绝对定位/固定定位会脱离文档流 1.1 ...
  • position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 常规取值: 1.static...
  • 浅谈《软件工程》常用几种软件开发方法

    千次阅读 热门讨论 2020-10-06 21:27:12
    目前常用的开发方法有,分别是结构化方法、原型法和面向对象方法。接下来我们会一一叙述这些软件开发方法的实现过程和其中的特点以及优缺点。 结构化方法 结构化方法:结构化方法是应用最为广泛的一开发...
  • selenium 八种定位元素的方式

    千次阅读 2022-02-22 15:14:46
    种定位方式:id,name,class name,tag name,link text,partial link text,xpath,css selector。其中id,name,class name,tag name是根据元素的标签或元素的属性来进行定位;link text,partial link text...
  • 几种常见网络攻击介绍以及科来分析实例;目录;MAC FLOODMAC洪乏;科来分析MAC FLOOD实例;MAC FLOOD的定位;SYN FLOODsyn洪乏;科来分析SYN FLOOD攻击实例;SYN FLOOD定位;IGMP FLOOD;科来分析IGMP FLOOD攻击实例;IGMP ...
  • div元素定位的五种方法及其区别

    千次阅读 2020-11-21 15:34:52
    方法一:默认定位,也就是静态定位...区别:有定位属性时,原先位置保留,不会被后面的元素占有,不脱离文档流;没有定位属性时,默认在当前位置。 方法四:绝对定位,相对于离它最近的定位祖先元素进行定位。 positi
  • 超链接几种类型,各什么作用

    千次阅读 2021-01-17 14:05:13
    展开全部分类:1、按照连接路径的不同,网页中超62616964757a686964616fe4b893e5b19e31333431353364链接一般分为以下3类型:内部链接,锚点链接和外部链接。2、如果按照使用对象的不同,网页中的链接又可以分为:...
  • 此处整合两篇文章 第一部分是基本的定位方法;第二部详细介绍了通过XPATH定位(.find_element_by_xpath). 第一部分:  下面我将复制该文章的部分内容,若要查看完整内容,请点击原文地址查看  Python: ...
  • 几种常见网络攻击介绍及通过 科来分析定位的实例 目录 MAC FLOOD SYN FLOOD | GMP FLOOD 分片攻击 蠕虫攻击 实例 MAC FLOOD(MAC洪乏) MAc洪乏 MAC的数据包,导致交换机MAC表满量伪造 利用交换机的MAC学习原理,通过...
  • bug定位方法

    万次阅读 2019-01-25 21:47:00
    因此定位bug过程可能:一可能是找到了bug产生原因并提给开发去纠正;另一可能是测试过程中程序产生的bug原因不明,测试或开发人员只得做某种推测,然后再设计测试用例证实这种推测,若一次推测失败,再做...
  • 在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素...其中By类的常用定位方式共八,现分别介绍如下: 1. By.name() 假设我们要测试的页面源码如下: Google Search
  • 8元素定位方式

    千次阅读 2019-09-24 13:25:53
    页面元素定位的方式 主要8 分类如下 元素属性定位 id , name , class_name 元素标签定位 tag_name 链接定位 link_text , partial_link_text 选择器定位 xpath , css_selector 因为很多时候只通过id ...
  • selenium 常用的八种定位元素的方法

    千次阅读 2019-10-16 23:34:37
    转载 Selenium Webdriver元素定位的八种常用方式 ...
  • 1.哪些定位方式,分别什么区别。 定位方式共有5,分别是【静态定位static】,【相对定位relative】,【绝对定位abosolute】,【固定定位fixed】,【继承定位inherit】 静态定位static: 元素默认的位置,默认...
  • 页面布局常用方法有浮动、定位、flex、grid网格布局、栅格系统布局 浮动: 优点:兼容性好。 缺点:浮动会脱离标准文档流,因此要清除浮动。我们解决好这个问题即可。 绝对定位 优点:快捷。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 135,759
精华内容 54,303
关键字:

常用的定位文档的方法有几种