精华内容
下载资源
问答
  • 相对定位 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。 2、不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘...
    • 相对定位
    • 相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。

    • 2、不脱标,老家留坑,形影分离
          也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
      3、相对定位用途
      相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:
      1) 微调元素
      2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说)
      4、相对定位的定位值
      可以用left、right来描述盒子右、左的移动;
      可以用top、bottom来描述盒子的下、上的移动。
    • 绝对定位
    • 1、 绝对定位脱标
          绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。
          绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block;就可以设置宽、高了:
      
      2、参考点
          绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:
          如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角:

    绝对定位的儿子,无视参考的那个盒子的padding。 绝对定位之后,所有标准流的规则,都不适用了。所以margin:0 auto;失效。如果想让盒子居中,就用 left:50%; margin-left:负的宽度的一半。

      

    • 固定定位
    • 固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
      固定定位脱标!
      IE6不兼容。

       

    • z-index
    • ● z-index值表示谁压着谁。数值大的压盖住数值小的。
      ● 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
      ● z-index值没有单位,就是一个正整数。默认的z-index值是0。
      ● 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
      ● 从父现象:父亲怂了,儿子再牛逼也没用。

       

     

     
     
     
     
     
     
     
    展开全文
  • 手动控制元素在包含块的精准位置,属性为position2、四种类型的定位● 默认值:static,静态定位(不定位)● relative:相对定位● absolute:绝对定位● fixed:固定定位3、定位元素的定义一个元素,只要position...
    51d5b3a2de1eda6ef147e83d3c5d7d29.gif
    a2bf282c61512d8382fabffff781b86e.png

    一、定位

    1、什么是定位?

    手动控制元素包含块中的精准位置,属性为position

    2、四种类型的定位

    ● 默认值:static,静态定位(不定位)

    relative:相对定位

    absolute:绝对定位

    fixed:固定定位

    3、定位元素的定义

    一个元素,只要position的取值不是static,认为该元素是一个定位元素

    4、定位元素的区别

    除了相对定位元素外,其他定位会脱离文档流。

    5、脱离文档流的特点

    ● 文档流中的元素摆放时,会忽略脱离了文档流的元素

    ● 文档流中元素计算自动高度时,会忽略脱离了文档流的元素


    二、相对定位

    position: relative

    1、特点

    ● 元素不会脱离文档流

    “相对”的参照物是元素本身,让元素在原来位置偏移

    ● 盒子的偏移不会对其他盒子造成任何影响。

    2、偏移属性

    left:向左偏移

    right:向右偏移

    top:向上偏移

    bottom:向下偏移

    3、相对定位和margin的区别

    代码:

    79893b0a35f8c434e85a59a1addd210a.png

    效果图:

    09940214dc99fe26f5476704b0608a70.png

    三、绝对定位

    1、绝对定位的包含块位置

    祖先第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块整个网页(初始化包含块)

    2、postion: relative

    代码:

    2a8e455c8c5415cbaf341e41701bdb34.png

    效果图:

    8f69d1dac24ac1da4140ecaef37a9961.png

    四、固定定位

    1、特点

    ● 其他情况和绝对定位完全一样。

    包含块不同:固定为视口(浏览器的可视窗口)

    2、postion: fixed

    3、居中显示

    ● 代码:

    ccc35e09572230ecac3d7cc34ca6f472.png

    ● 效果图:

    e42fa23839ee2d4ba6c7775f086b9ed4.png

    五、上一集

    >>>Python Web全栈之旅09--Web前端●CSS浮动

    展开全文
  • 相对定位和绝对定位的区别是什么? 绝对定位的特性: 1、当子元素没有父容器时,子元素会依赖body进行定位 2、当父容器嵌套了一个子元素,此时父容器没有设置定位属性,而子元素设置了定位属性,那么这个子...

     

     

    相对定位和绝对定位的区别是什么?

     

    绝对定位的特性:

           1、当子元素没有父容器时,子元素会依赖body进行定位
           2、当父容器中嵌套了一个子元素,此时父容器没有设置定位属性,而子元素设置了定位属性,那么这个子元素会依赖浏览器进行定位,而不会依赖父容器。详见案例1
              
           3、当父容器中嵌套了一个元素,此时父容器设置了定位属性,而子元素也设置了定位属性,那么这个元素会依赖于父容器进行定位。详见案例2

     

    案例1:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位的特性</title>
        <style>
            /*
          定位的特性:
          父容器
        */
            #id-selector-dv-father {
                width: 300px;
                height: 300px;
                background-color: red;
    
            }
    
            #id-selector-dv-son {
                width: 100px;
                height: 100px;
                background-color: green;
    
                /*将子元素进行定位*/
                position: absolute;
                /*并设置子元素距离的浏览器左边的间距*/
                left: 400px;
            }
    
        </style>
    </head>
    <body>
    
        <!--
        1、当父容器中嵌套了一个子元素,此时父容器没有设置定位属性,而子元素设置了定位属性,那么这个子元素会依赖浏览器进行定位,而不会依赖父容器
        -->
        <div id="id-selector-dv-father">
            <div id="id-selector-dv-son">我是父容器中的子元素</div>
        </div>
    
    
    
    
    </body>
    </html>

     

    案例2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位的特性</title>
        <style>
            /*
          定位的特性:
          父容器
        */
            #id-selector-dv-father {
                width: 300px;
                height: 300px;
                background-color: red;
    
                /*给父容器也设置了定位属性*/
                position: absolute;
                /*给父容器也设置了距离左边的间距*/
                left: 100px;
    
            }
    
            #id-selector-dv-son {
                width: 100px;
                height: 100px;
                background-color: green;
    
                /*将子元素进行定位*/
                position: absolute;
                /*并设置子元素距离的浏览器左边的间距*/
                left: 100px;
            }
    
        </style>
    </head>
    <body>
    
    
        <!--
        2、当父容器中嵌套了一个元素,此时父容器设置了定位属性,而子元素也设置了定位属性,那么这个子元素会依赖于父容器进行定位
        -->
        <div id="id-selector-dv-father">
            <div id="id-selector-dv-son">我是父容器中的子元素</div>
        </div>
    
    
    
    
    </body>
    </html>

     

     

     

    相对定位的特性:

         1、在设置相对定位时,该div只会相对于自己原来的位置进行定位,设置向左向右的间距也只会相对于自己原来的位置。详见案例3
         2、如果只是设置了 position: relative; 而没有设置left 、right、top、bottom其中一个属性,那么定位失效,盒子的位置将不会改变
         3、相对定位是占据标准流的位置

     

    案例3

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位---相对定位</title>
        <style>
            div {
                width: 300px;
                height: 300px;
            }
    
            #id-selector-dv-one {
                background-color: green;
            }
    
            #id-selector-dv-two {
                background-color: #FF8F06;
                position: relative;
                left: 50px;
                top: 50px;
            }
    
            #id-selector-dv-three {
                background-color: red;
            }
    
        </style>
    </head>
    <body>
    
    
    
        <div id="id-selector-dv-one">
            1
        </div>
    
        <div id="id-selector-dv-two">
            2
        </div>
    
        <div id="id-selector-dv-three">
            3
        </div>
    
    </body>
    </html>

    展开全文
  • 今天好程序员web前端教程为大家分享web中CSS绝对定位的教程 绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在...

      今天好程序员web前端教程为大家分享web中CSS绝对定位的教程 

      绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

      普通流中其它元素的布局就像绝对定位的元素不存在一样:

      #box_relative{

      position:absolute;

      left:30px;

      top:20px;

      }

      如下图所示:

    c1a64cc689da2e164646a559921ba0f6.png

     绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

      对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

      注释:根据用户代理的不同,最初的包含块可能是画布或HTML元素。

      提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。

    展开全文
  • 手动控制元素在包含块的精准位置,属性为position2、四种类型的定位● 默认值:static,静态定位(不定位)● relative:相对定位● absolute:绝对定位● fixed:固定定位3、定位元素的定义一个元素,只要position...
  • CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效...
  • String path = JsonController.class.getClassLoader().getResource(...利用类加载器从web项目的class下开始寻找。   /D:/apache-tomcat-8.5.16/wtpwebapps/iquniqlo_admin/WEB-INF/classes/jsonStr 类加载器。
  • 不是最近的祖先定位元素,不是参照物 &lt;div—————————-没有设置为定位元素,不是参照物 &lt;div———————- position:relative 参照物 &lt;div box1 &lt;div box2 ——–position:...
  • 今天好程序员web前端教程为大家分享web中CSS绝对定位的教程  绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它...
  • CSS布局在整个前端开发占据了大约50-70%的工作量,在遵循web规范的前提下,编写合乎规范的前端代码,实现结构、样式和行为的分离,对于后期代码的维护以及不同的开发人员之间的协作具有重要的意义。在编写html的...
  • css的定位和绝对定位尤其是对一个刚刚接触web的解是有些不好搞清楚,以我的理解是相对定位是离该元素最近的元素为参考点来定位的。绝对定位是脱离文档流,以浏览器的左上角也就是坐标(0,0)为参考点来定位的。本人...
  • CSS几种控制页面布局的定位机制对于web的初学者来说,CSS的几种定位方式经常让人摸不着头脑...CSS包含三种控制页面布局的定位机制:普通流、相对定位、绝对定位。在CSS通过position属性表明定位机制。此外还可
  • CSS几种控制页面布局的定位机制 ... CSS包含三种控制页面布局的定位机制:普通流、相对定位、绝对定位。在CSS通过position属性表明定位机制。此外还可以使用float属性来让元素浮动  普通流 ...
  • 最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈...
  • 1、position属性可以控制Web浏览器如何以及在何处显示特定的元素。 2、可以使用position属性把一... – relative:开启相对定位  – absolute:开启绝对定位  – fixed:开启固定定位 3、相对定位 ①每个元素
  • web自动化测试定位方法,常用相对路径来定位,推荐使用 xpath 定位。八大定位方式=6种基本定位+xpath+css1. id定位 # id定位,属性 + 操作 = webELement ele1 = driver.find_element_by_id("kw") print(ele1)2....
  • 对于web的初学者来说,CSS的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,我去年学习web编程的时候就对这个一知半解,今天,回过头来再次学习web编程,趁有时间就好好总结一下CSS的几种定位...
  • Web_CSS_DIV相对浏览器定位及其关闭;

    千次阅读 2014-03-03 13:48:54
    功能:DIV在屏幕的绝对定位。 hello html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; //溢出隐藏;解决IE8滚动条问题; } #Main { ...
  • CSS定位一直是WEB标准应用的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。  定位的定义:  在CSS关于定位的内容...
  • css中定位属性允许元素相对于本身的位置,相对与父元素、浏览器窗口位置调整 网页出现覆盖关系。优先考虑使用定位技术 定位偏移属性 * top属性 * bottom属性 * left属性 * right属性 属性值:auto|inherit|length|...
  • 定位一直是WEB标准应用的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。  定位的定义:  在CSS关于定位的内容是: ...
  • “组件化”是近几年web前端开发的趋势,关于如何设计出好的组件,本文总结了6点经验,希望对读者有所帮助。减少依赖尽量不要和其它组件共享变量,保持原子性,依赖过多会影响组件的可复用性和稳定性。尤其不要从路由...
  • 使用position定位有四种方式,分别为absolute、relative、static、fixed,...(1) 绝对定位是将元素依据已经定位(绝对、固定或相对定位)的离他最近的祖先元素进行定位,祖先元素没有定位或没有祖先元素则默认依据...
  • 1. 绝对定位:position:absolute(1) 绝对定位是将元素依据已经定位(绝对、固定或相对定位)的离他最近的祖先元素进行定位,祖先元素没有定位或没有祖先元素则默认依据body浏览器窗口定位。(2) 绝对定...
  • jsp的forward和sendRedict的跳转时,路径有绝对路径和相对路径两种。 在使用相对路径时,两者的写法没有什么区别。 但在使用绝对路径时有区别。 forward的绝对路径需要从当前web项目的根目录开始,而...
  • 针对Robotframework和Selenium的安装、使用等基础知识不做介绍,只讨论在进行自动化脚本编写过程遇到的元素定位失败问题。02但是你不得不了解的事RF框架在做前端自动化时,支持的元素定位方式有:css定位、id定...
  • web自动化控件定位

    2020-11-14 22:15:52
    定位调试技巧 ,使用调试模式在 console 输入定位语句 $x 代表使用xpath # //* 选取所有元素, @id 指定id=s_tab //b选取s_tab 下的b元素 $x('//*[@id="s_tab"]//b') #定义到第一个 $x('//*[@id="s_tab"]//a[1]...
  • 在用CSS控制排版过程定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 385
精华内容 154
关键字:

web中相对定位