精华内容
下载资源
问答
  • } .li2{ /*相对定位:相对于他原来的位置,对后续元素没有影响*/ position: relative; top: 50px; left: 50px; } </style> <body> <ul> 第一行</li> 第2行</li> 第3行</li> ...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<style type="text/css">
            ul{
            	list-style: none;/列表的样式,去掉前面的点
            }
    		li{
    			border: 1px solid red;
    	        width: 100px;
    	        height: 100px;
    	        	
    		}
    		.li2{
    			/*相对定位:相对于他原来的位置,对后续元素没有影响*/
    			position: relative;
    			top: 50px;
    			left: 50px;
    		}
    	</style>
    	<body>
    	   <ul>
    	   	<li>第一行</li>
    	   	<li class="li2">2</li>
    	   	<li>3</li>
    	   	<li>4</li>
    	   	<li>5</li>
    	   </ul>
    	</body>
    </html>
    
    展开全文
  • 相对定位 相对位置,是指相对于盒子在原本定位体系下的位置 将盒子的position属性设置为relative,以启用相对位置 盒子启用相对位置,起始位置为元素本身位置的左上角,移动后会保留盒子的本身的位置,下面的常规流...

    相对定位

    相对位置,是指相对于盒子在原本定位体系下的位置

    将盒子的position属性设置为relative,以启用相对位置

    盒子启用相对位置,起始位置为元素本身位置的左上角,移动后会保留盒子的本身的位置,下面的常规流盒子不会移动。
    在这里插入图片描述

    视口

    浏览器的可视 窗口

    绝对定位

    概述

    • 当浮动元素被设置为绝对定位

      属于绝对定位,float属性被强制设置为none

    • 绝对定位元素对其他元素的影响

      绝对定位元素不会对其他任何元素造成任何影响

    • 绝对定位元素的位置

      可通过left、top、right、bottom来设置(都可以设置负值)

      固定位置

      position:fixed;

      元素的包含块:视口;(即:移动的起始位置为视口的左上角)

      偏移量的设置(移动)

      起始位置是视口的左上角

      适用场景:

      pc端:页面头部

      移动端:footer

      以下五个情况的元素,推荐为aside

      1.AD(广告)

      2.侧边栏

      3.目录

      4.回到顶部

      5.即时通讯

      绝对位置

      position:absolute;

      寻找包含块:包含我,离我最近元素的position值不等于static。

      适用场景:2个及以上的标签需要重叠在一起的时候

    展开全文
  • 相对定位(relative):先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己在原来文档流的位置。相对定位之后的对象并没有完全从文档流脱离,这个对象原来在文档的位置保留着...

    相对定位(relative):

    先说相对定位:跟它的名一样,相对嘛,要有一个参照物,但这个参照不是别的,是它自己在原来文档流中的位置。相对定位之后的对象并没有完全从文档流中脱离,这个对象原来在文档中的位置保留着(站着茅坑不拉屎),偏移后的对象会把其它的层遮罩住。

    将相对定位特征总结如下:

    ①相对定位的元素,在没有设置宽度的情况下,宽度是整个浏览器的宽度,或者是依赖于父元素的宽度。

    ②相对定位的块状元素相对于原来位置移动,移动后仍然占据文档流的位置,不影响其他元素的布局

    下面通过代码进行验证

    在浏览器中放置5个盒子,用不同的颜色来表示,代码如下

    HTML代码

    fb054576e2a0c31366460b5aa23f4d51.png

    CSS代码

    96fd5a5c451542980ba8dabbc0a1d53a.png

    最初效果图

    2b3249a16d075ca8e0965b04a7397aa1.png

    给第三个盒子设置相对定位

    5e54905c40edb0d66b187d42a6aff695.png

    元素相对于原来位置偏移,宽高都没变,撑大了容器,还占据着原来在文档流中的位置,对其它元素的布局没有产生影响。

    cca863f4311cac2429b08f891db2a6eb.png

    绝对定位(absolute):

    被绝对定位的对象将从文档流中脱离,绝对定位的参照位置就不再是自己了,是哪个,就看它的上级或上上级有没有定位了,使用left,right,top, bottom等属性相对于其最接近的一个有相对或者绝对定位设置的父级对象进行绝对定位,如果父级没有设置定位属性,则会相对于html根元素进行定位,看了一些帖子发现有人认为如果父对象没有设置定位属性,则会相对于body进行定位,这个说法是不对的。

    将绝对定位的特征总结如下:

    ①绝对定位的块状元素在没有设置宽度的情况下,宽度由元素里面的内容决定

    ②脱离后原来的位置相当于是空的,下面的元素会来占据位置

    ③绝对定位的对象相对于距离自己最近的设置了相对定位或者绝对定位的父对象进行定位

    ④如果父元素没有定位,则相对于html根元素定位

    下边还是通过这五个盒子的偏移来验证

    (1)块元素无偏移值

    上边的5个盒子,只给box5一个绝对定位,无偏移值。此时块状元素只是漂浮在原来的位置,如果后边还有块状元素,将会占据他在文档流中的位置,我们在box5下边加上一个box6看一下效果。

    说明:绝对定位的块状元素在没有定义宽度的情况下,宽度由元素里面的内容决定。

    44985fde516827eee0155fab760a44f8.png

    效果图如下

    d122e2006797bb623b5a26d976a92e67.png

    加一个box6的效果

    30e1ea9d2c94912884a5ba1f3e51934d.png

    从图中可以看出,box6已经占据了box5在文档流中的位置了。

    (2)有偏移值

    如果设置了偏移值而父元素没有设置相对定位或绝对定位的情况下,元素相对于根元素定位(即html元素,注意是相对于根元素,而不是相对于body)用box5的偏移来验证。

    ①给box5一个偏移量,父元素没有相对或者绝对定位

    5d642a717fbbaf77d16e30c00b15c469.png

    效果图如下

    494e84f54a837758b7ff6bad724c0577.png

    ②给box5同样的偏移量,给body元素一个绝对定位(body元素设置为了absolute,绝对定位的块状元素的宽度由最长p决定,宽度变小了):

    aaf987a6627b648e83ce9697bd9c7b2c.png

    效果图如下

    911bac05b58c25cc5df4d907ebdab04b.png

    图片发自App

    从上边的两张效果图明显发现相对于根元素的定位与相对于body的定位是不相同的,主要的区别在于有没有算进去body的margin值。

    下面在五个盒子外边再嵌套三个父盒子,并给这三个父盒子一个定位,来验证是否是根据最近定位的父元素进行偏移。

    代码如下

    HTML代码

    9e733451978c126e6e62886eff2a71a6.png

    CSS代码

    35baf65d16eec207ade5e0cee73d741e.png

    效果图

    f77670e0be20938bc9cf766eaf5f4610.png

    图片发自App

    从上边很明显看的出来box5是相对于第三层容器也就是离它最近的容器进行的定位。有兴趣的可以试一试,把第三层容器的定位去掉,看看是不是就相对于第二层容器定位了,我已经验证过,就不放图了。

    有同学会问,为什么要把最外层的盒子设置为绝对定位,其它两个设置为相对定位,这个定位的方法区别主要影响的是盒子的宽度,相对定位的块元素在没有设置宽度的情况下,它的宽度就是默认的浏览器的宽度,有父元素的情况下,则它的宽度由父元素决定,如果这个块元素的内容过多,则会把父元素也撑大。

    ,也就是说相对定位的块元素的宽度依赖于父元素,那么如果把这三个容器都设置为绝对定位会有什么效果呢,先来看一看效果图

    d8461a6782387e1c6354af287b840417.png

    图片发自App

    从图中可以看出,第三层容器的宽度已经不再依赖于父元素,因为它从文档流中脱离出来了,他自己是独立的,而他的宽度只能由内容来决定。总结起来就是,绝对定位的块元素宽度由自己的内容决定,相对定位的块元素在没有设定宽度时,默认就是浏览器的宽度。但是不管宽度怎样,绝对定位的元素都会找到离自己最近定位(绝对或者相对定位)的父元素来进行定位。

    总结:

    relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

    absolute:定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱离了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。

    说明:本文的实验结果是在父元素及子元素没有设置固定宽度的情况下得来的,如果父元素设置了固定的宽度,他的子元素无论是绝对定位还是相对定位的子元素都不能超过其父元素的宽度,父元素是老大哥,谁都不能超过他。

    展开全文
  • 本文的WEB前端讲述了div css 相对定位,通过具体的代码实现,希望对大家学习WEB前端有所帮助。.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: ...

    本文的WEB前端讲述了div css 相对定位,通过具体的代码实现,希望对大家学习WEB前端有所帮助。

    .box1{

    width: 200px;

    height: 200px;

    background-color: red;

    }

    .box2{

    width: 200px;

    height: 200px;

    background-color: yellow;

    /*

    * 定位:

    *     - 定位指的就是将指定的元素摆放到页面的任意位置

    *         通过定位可以任意的摆放元素

    *     - 通过position属性来设置元素的定位

    *         -可选值:

    *             static:默认值,元素没有开启定位

    *             relative:开启元素的相对定位

    *             absolute:开启元素的绝对定位

    *             fixed:开启元素的固定定位(也是绝对定位的一种)

    */

    /*

    * 当元素的position属性设置为relative时,则开启了元素的相对定位

    *     1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化

    *  2.相对定位是相对于元素在文档流中原来的位置进行定位

    *     3.相对定位的元素不会脱离文档流

    *     4.相对定位会使元素提升一个层级

    *     5.相对定位不会改变元素的性质,块还是块,内联还是内联

    */

    position: relative;

    /*

    * 当开启了元素的定位(position属性值是一个非static的值)时,

    *     可以通过left right top bottom四个属性来设置元素的偏移量

    *     left:元素相对于其定位位置的左侧偏移量

    *     right:元素相对于其定位位置的右侧偏移量

    *     top:元素相对于其定位位置的上边的偏移量

    *     bottom:元素相对于其定位位置下边的偏移量

    *

    * 通常偏移量只需要使用两个就可以对一个元素进行定位,

    *     一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    */

    /*left: 100px;

    top: 200px;*/

    left: 200px;

    }

    .box3{

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

    }

    .s1{

    position: relative;

    width: 200px;

    height: 200px;

    background-color: yellow;

    }

    我是一个span

    希望这篇文章可以帮助到你,总之同学们,IT资讯尽在职坐标。

    展开全文
  • css的怎么设置相对定位?想要设置相对定位,需要在元素使用position属性,将其值设置为relative,即position: relative;即可。通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在...
  • 本文将以一个盒子模型的案例来完成对CSS相关知识的总结,涉及到盒模型和定位的相关知识,快来看看吧!
  • web中的绝对路径和相对路径的概念及有什么区别 本篇文章主要介绍计算机文件的绝对路径和相对路径有什么区别,自己凭着对他的理解,加上网上查找相关资料,写了如下。感兴趣的小伙伴们一定要看完! 一、 一个文件的...
  • CSS几种控制页面布局的定位...CSS包含三种控制页面布局的定位机制:普通流、相对定位、绝对定位。在CSS通过position属性表明定位机制。此外还可以使用float属性来让元素浮动普通流相应语法(默认)position:stat...
  • web自动化测试定位方法,常用相对路径来定位,推荐使用 xpath 定位。八大定位方式=6种基本定位+xpath+css1. id定位# id定位,属性 + 操作 = webELementele1 = driver.find_element_by_id("kw")print(ele1)2. 标签...
  • 这一节,我们介绍一下页面元素定位的八种方式和如何通过火狐和谷歌浏览器获取元素定位信息.页面元素的定位方法html页面是有一个个的标签组成的,我们定位元素其实就是定位这些标签。首先来看一下有哪儿几种定位方式...
  • 1.相对定位:.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;/*margin-left: 200px;margin-top: 200px;*//*定位- 通过定位可以将元素摆放到...
  • Selenium自动化测试Web定位器用于对页面的Web元素执行不同的操作。 毫不奇怪,作为新的Selenium用户,我们要学习的第一件事是Selenium Locators。 这些定位器是任何Selenium自动化测试框架的基础,无论您进行的...
  • 有两种情况:1)如果父DIV采用相对定位,其子DIV只能采用绝对定位吗?(根据我的理解:子DIV永远浮于父DIV之上)2)如果父DIV采用绝对定位,那么可以定义其子DIV吗?回复讨论(解决方案)绝对定位如果父级不使用position:...
  • # -*- coding:utf-8 -*-from selenium import webdriverfrom selenium.webdriver.common.by import By# 打开Chrome浏览器和百度网页driver = webdriver.Chrome()driver.get('https://www.baidu.com/')# 元素定位:id...
  • web前端html定位层的特点: 完全脱离默认文档流,独立于立体层面的Z轴之上。和float浮动一样都脱离了默认文档流。但float元素与默认文档流之间...绝对定位与相对定位的区别:absolute元素完全脱离默认文档流,不保留占
  • 一、查看页面元素 ...更多工具>... 点击框左上角的箭头图标,移动鼠标到百度搜索框,就可以自动定位到百度搜索框的HTML代码了...从上面定位到的搜索框属性,有个id="kw"的属性,我们可以通过这个id定位到这个搜索框 代
  • 在做UI自动化测试时,最重要也最基础的应该是定位控件了,web端有八大定位方式,如下: 1. driver.find_element_by_id 查看控件id的方法: 进入web,鼠标右键,点击“检查”,调出开发者模式,步骤如下: 想要...
  • 相对路径 . 当前路径 … 返回上层 @ 选取属性 实例: html/head/div /html/div/ //div //div/./.. //div[@name] 根据属性名定位 //div[@name='taoge'] 根据属性名和属性值定位 //div[@name='taoge']/div[1]...
  • × 目录 [1]定位 [2]包含块 [3]偏移属性 [4]绝对定位 [5]格式化 [6]auto前面的话CSS有三种基本的定位机制:普通流、浮动和绝对定位。利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父...
  • 相对路径在此次web自动化测试的定位中,就是以特定能定位其位置的HTML控件作为参照,来阐述博客园登录用户名输入框的路径。(建议打开博客园登录页面对比着学习) 例如本次case的相对坐标定位: //*[@class="mat-...
  • 我创建了一个类似于 Microsoft Metro UI的简单,轻量级GUI....我尝试了各种CSS定位技术(相对,固定,绝对)但无法解决它.我怀疑是因为瓷砖是浮动元素? 我怎样才能设计每个瓷砖的内容,无论它在网页的位置如何?
  • 目前,在自动化测试的实际应用,接口自动化测试被广泛使用,但UI自动化测试也并不会被替代。让我们看看二者的对比: 接口自动化测试是跳过前端界面直接对服务端的测试,执行效率和覆盖率更高,维护成本更低,整体...
  • Web前端基础3-定位

    2021-03-31 19:30:29
    相对定位(relative)2.绝对定位(absolute)3.固定定位(fixed) 一.定位 定位常用的属性:left、right、top、bottom 0.案例 position.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • ID定位 driver.find_element_by_id("kw").send_keys('你好') NAME定位 driver.find_element_by_name("wd").send_keys('name') CLASS_NAME定位 driver.find_element_by_class_name("s_ipt").send_keys('class_...
  • http://blog.csdn.net/swlxm/archive/2007/04/27/1587185.aspx Web项目相对路径在JSP的HTML部分相对路径在JSP的JAVA部分相对路径在FORM的ACTION属性的Servlet引用在Servletforward到另一JSP文件对 ...
  • 在 CSS ,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局、处理元素排列的关键。 CSS组成一个块级盒子需要: content box: 这个区域是用来显示内容,大小...
  • 定位是一种更加高级的布局手段,通过定位可以将一个元素摆放到页面的任意位置,使用position属性来设置定位。 目录知识点学习1、定位的简介2、绝对定位3、固定定位4、粘滞定位5、绝对定位元素的布局6、元素的层级7、...
  • 1.id定位 #id定位,属性+操作=返回webELement对象 ele1=driver.find_element_by_id("kw") print(ele1) 2.标签名定位tag_name 不能唯一的找到特定的元素 ele2=driver.find_element_by_tag_name("input")#(译:...
  • 元素定位的8种方法:id、name、class、tag、link、partail_link、xpath、css_selector1、id定位:find_element_by_id()从上面定位到的搜索框属性,有个id="kw"的属性,我们可以通过这个id定位到这个搜索框代码:# ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 106,756
精华内容 42,702
关键字:

web中相对定位