前端CSS五中元素定位类型

元素想通过底部、顶部、左侧、右侧属性定位是必须先设定position的属性值

posistion属性的五个值:static、relative、fixed、absoulte、sticky

  • static定位
    • HTML的默认定位,正常文档流对象
    • 不受top、bottom、left、right的影响
  • relative定位
    • 相对定位元素的定位是   相对其正常位置
    • 即移动相对定位元素,它原本所占的空间不会改变
    • 相对定位元素经常被用来作为定位元素的容器块
    • h2.pos_left
      {
          position:relative;
          left:-20px;
          background-color:red;
      }
      
      h2.pos_right
      {
          position:relative;
          left:20px;
          background-color:blue;
      }
  • fixed定位
    • 元素的位置是相对于 浏览器窗口 是固定位置
    • 与文档流无关,因此不占据空间
    • fixed定位的元素和其他元素重叠
    • div.fixed{
          position: fixed;
          border: 3px solid #73AD21;
          right:20px;
          bottom:20px;
          top:20px;
      }

      注意看代码的样式设置,fixed相对于top,与botton同时设置的话,div会被撑开

  • absolute定位
    • 绝对定位的元素相对于最近的已定位元素,如果元素没有已定位的父元素,那么他的位置相对于<html>

    • 与文档流无关,不占据空间
    • absolute定位的元素和其他元素重叠
  • sticky定位
    • 粘贴定位
    • 基于用户的滚动位置来定位
    • 依赖于用户的滚动,在position:relative与position:fixed定位之间切换
    • 在页面滚动目标区域内它的行为类似于relative,超出目标区域则像fixed,固定在目标位置
    • 指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
(0)

相关推荐

  • 史上最全!Selenium元素定位的30种方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  • CSS伪元素:before和:after详解与妙用

    定义 ::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素.常通过 content 属性来为一个元素添加修饰性的内容.::after用来创建一个伪元素,作为已选中元素的最后一个子元素 ...

  • Appium+python自动化12-appium元素定位

    前言 appium定位app上的元素,可以通过id,name.class这些属性定位到 一.id定位 1.appium的id属性也就是通过UI Automator工具查看的resource-id属性 ...

  • 关于面试总结10-selenium中隐藏元素定位

    前言 面试题:selenium中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚啥 ...

  • Cypress web自动化28-运行器界面调试元素定位和操作

    前言 Cypress提供了一个很好的测试运行器, 它为你提供了一套可视化结构的测试和断言套件, 很快你也会看到命令, 页面事件, 网络请求等. 当你还没熟练掌握元素定位时,在运行器界面点开探测器,会自 ...

  • 2.4元素定位xpath_css

    xpath和css定位基础

  • 2.3元素定位tag_link

    元素定位基础

  • 2.2元素定位id_name_class

    元素基础定位

  • Appium之「元素定位和UiAutomator表达式」

    作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.常见属性的用法 1.怎么用 resource-id? 2.其它属性 二.通过截图就可以看到元素的属性,那怎么元素定位呢? 1 ...