CSS元素定位

最新推荐文章于 2025-04-05 22:19:37 发布
最新推荐文章于 2025-04-05 22:19:37 发布
阅读量456 收藏 7
点赞数 6
分类专栏： CSS3 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42535142/article/details/135408737
版权

目录

一、标准流（Normal Flow）​

二、margin-padding位置调整 ​

三、认识元素的定位​

四、认识position属性​

五、静态定位 - static​

六、相对定位 - relative​

七、相对定位练习​

八、固定定位 - fixed​

九、画布 和 视口​

十、固定定位练习​

十一、绝对定位 - absolute​

十二、子绝父相​

十三、将position设置为absolute/fixed元素的特点(一)​

十四、将position设置为absolute/fixed元素的特点(二)​

十五、auto到底是什么?​

十六、绝对定位的案例练习​

十七、粘性定位 - sticky​

十八、position值对比​

十九、CSS属性 - z-index​

一、标准流（Normal Flow）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: inline-block;
      position: static;

      left: 0;
      top: 100px;
      bottom: 20px;
      right: 30px;
    }
  </style>
</head>
<body>
  
  <div>div元素</div>
  <span>span元素</span>
  <img src="../images/gouwujie01.jpg" alt="">
  <div class="box"></div>

</body>
</html>

 

二、margin-padding位置调整

三、认识元素的定位

四、认识position属性

五、静态定位 - static

六、相对定位 - relative

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      /* margin-left: 30px; */  

      /* relative: 相对定位 */
      position: relative;
      left: -30px;
      top: -50px;
      /* bottom: 50px;
      right: 30px; */
    }
  </style>
</head>
<body>
  
  <span>我是span元素</span>
  <strong class="text">我是strong元素</strong>
  <img src="../images/kobe01.jpg" alt="">
  <div>我是div元素</div>

</body>
</html>

 

七、相对定位练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      height: 489px;
      background-color: #f00;
      background: url(../images/mhxy.jpg) center;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      height: 489px;
      background-color: #f00;
      overflow: hidden;
    }

    .box img {
      position: relative;
      /* left: 图片的一般 */
      left: -960px;
      /* translate中的百分比是相对于自己 */
      /* transform: translate(-50%); */

      /* 向右边移动div的一般 */
      margin-left: 50%;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <img src="../images/mhxy.jpg" alt="">
  </div>

</body>
</html>

 

八、固定定位 - fixed

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .text {
      position: fixed;
      right: 30px;
      bottom: 30px;
    }
  </style>
</head>
<body>
  
  <span>我是span元素</span>
  <strong class="text">我是strong元素</strong>
  <img src="../images/kobe01.jpg" alt="">
  <div>我是div元素</div>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>
  <br><br><br><br>

</body>
</html>

 

九、画布 和 视口

十、固定定位练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .handle {
      position: fixed;
      right: 30px;
      bottom: 30px;
    }

    .handle .item {
      width: 80px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: brown;
      color: #fff;
      border-radius: 8px;
      cursor: pointer;
    }

    .handle .item:hover {
      background-color: red;
    }

    .top {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  
  <div class="handle">
    <div class="item top">顶部</div>
    <div class="item bottom">反馈</div>
  </div>

  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>

</body>
</html>

 

十一、绝对定位 - absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 1000px;
      height: 800px;
      background-color: #f00;

      /* position: fixed; */
      position: relative;
      top: 0;
    }

    .box {
      position: relative;

      width: 600px;
      height: 400px;
      background-color: #0f0;
    }

    strong {
      /* 脱离标准版 */
      position: absolute;

      /* 设置的四个值 */
      /* 在没有祖先元素定位的情况下, 相对于的是谁? 视口 */
      right: 0;
      top: 0;
    }

    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>哈哈哈啊</div>
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>
  <div>呵呵呵呵</div>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 800px;
      height: 800px;
      background-color: #f00;

      position: relative;
    }

    .box {
      width: 500px;
      height: 500px;
      background-color: #0f0;

      position: absolute;
      right: 0;
      bottom: 0;
    }

    strong {
      position: absolute;
      left: 0;
      bottom: 0;
    }

    img {
      width: 100px;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>

</body>
</html>

 

十二、子绝父相

十三、将position设置为absolute/fixed元素的特点(一)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 800px;
      height: 800px;
      background-color: #f00;

      position: relative;
    }

    .box {
      width: 500px;
      height: 500px;
      background-color: #0f0;

      position: absolute;
      right: 0;
      bottom: 0;
    }

    strong {
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #00f;
      color: #fff;
      width: 200px;
      height: 60px;
    }

    img {
      width: 100px;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: #f00;
    }

    .box strong {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <strong>
      <span>我是strong元素</span>
      <i>我是i元素</i>
    </strong>
  </div>

</body>
</html>

 

十四、将position设置为absolute/fixed元素的特点(二)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      height: 300px;
      background-color: #f00;
      position: relative;
    }

    /* 兼容性 */
    .container {
      height: 100px;
      background-color: #0f0;
      
      width: 200px;
      /* width: 100%; */
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="container"></div>
  </div>

</body>
</html>

 

十五、auto到底是什么?

十六、绝对定位的案例练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 重置代码 */
    a {
      text-decoration: none;
      color: #333;
    }

    /* 公共的CSS */
    .sprite_01 {
      background-image: url(../images/music_sprite_01.png);
      display: inline-block;
    }

    .sprite_02 {
      background-image: url(../images/music_sprite_02.png);
      display: inline-block;
    }

    .sprite_02_icon_music {
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }

    .sprite_02_icon_play {
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }

    /* 布局代码 */
    .item {
      width: 140px;
      margin: 0 auto;
    }

    .item .top {
      position: relative;
    }

    .item .top img {
      /* 将图片下面的多出来的区域去除 */
      vertical-align: top;
      /* display: block; */
    }

    .item .top .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      background-image: url(../images/music_sprite_01.png);
      background-position: 0 0;
    }

    .item .top .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 27px;
      padding-left: 10px;
      line-height: 27px;

      font-size: 12px;
      color: #ccc;

      background-image: url(../images/music_sprite_01.png);
      background-position: 0 -537px;
    }

    .item .top .info .icon-music {
      position: relative;
      top: 1px;
      /* display: inline-block; */
      /* width: 14px;
      height: 11px; */

      /* background-image: url(../images/music_sprite_02.png); */
      /* background-position: 0 -24px; */
    }

    .item .top .info .count {
      margin-left: 4px;
    }

    .item .top .info .icon-play {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto 0;

      /* display: inline-block; */
      /* width: 16px;
      height: 17px; */
      /* background-image: url(../images/music_sprite_02.png); */
      /* background-position: 0 0; */
    }


    /* 底部的样式 */
    .item .bottom {
      display: block;
      margin-top: 8px;
      font-size: 14px;
    }

    .item .bottom:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  
  <div class="item">
    <div class="top">
      <img src="../images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="#"></a>
      <div class="info">
        <i class="sprite_02 sprite_02_icon_music icon-music"></i>
        <span class="count">62万</span>
        <i class="sprite_02 sprite_02_icon_play icon-play"></i>
      </div>
    </div>
    <a class="bottom" href="#">
      天气好的话，把耳机分给我一半吧
    </a>
    <i class="sprite_02 sprite_02_icon_play"></i>
    <i class="sprite_02 sprite_02_icon_music"></i>
  </div>

</body>
</html>

 

十七、粘性定位 - sticky

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .nav {
      background-color: #f00;
      color: #fff;

      /* position: relative;
      top: 0;
      left: 0;
      right: 0; */
      position: sticky;
      top: 0;
    }
  </style>
</head>
<body>

  <h1>我是标题</h1>
  <div class="nav">
    <span>电脑</span>
    <span>手机</span>
    <span>衣服</span>
    <span>鞋子</span>
  </div>
  <ul>
    <li>电脑列表1</li>
    <li>电脑列表2</li>
    <li>电脑列表3</li>
    <li>电脑列表4</li>
    <li>电脑列表5</li>
    <li>电脑列表6</li>
    <li>电脑列表7</li>
    <li>电脑列表8</li>
    <li>电脑列表9</li>
    <li>电脑列表10</li>
    <li>电脑列表11</li>
    <li>电脑列表12</li>
    <li>电脑列表13</li>
    <li>电脑列表14</li>
    <li>电脑列表15</li>
    <li>电脑列表16</li>
    <li>电脑列表17</li>
    <li>电脑列表18</li>
    <li>电脑列表19</li>
    <li>电脑列表20</li>
    <li>电脑列表21</li>
    <li>电脑列表22</li>
    <li>电脑列表23</li>
    <li>电脑列表24</li>
    <li>电脑列表25</li>
    <li>电脑列表26</li>
    <li>电脑列表27</li>
    <li>电脑列表28</li>
    <li>电脑列表29</li>
    <li>电脑列表30</li>
    <li>电脑列表31</li>
    <li>电脑列表32</li>
    <li>电脑列表33</li>
    <li>电脑列表34</li>
    <li>电脑列表35</li>
    <li>电脑列表36</li>
    <li>电脑列表37</li>
    <li>电脑列表38</li>
    <li>电脑列表39</li>
    <li>电脑列表40</li>
    <li>电脑列表41</li>
    <li>电脑列表42</li>
    <li>电脑列表43</li>
    <li>电脑列表44</li>
    <li>电脑列表45</li>
    <li>电脑列表46</li>
    <li>电脑列表47</li>
    <li>电脑列表48</li>
    <li>电脑列表49</li>
    <li>电脑列表50</li>
    <li>电脑列表51</li>
    <li>电脑列表52</li>
    <li>电脑列表53</li>
    <li>电脑列表54</li>
    <li>电脑列表55</li>
    <li>电脑列表56</li>
    <li>电脑列表57</li>
    <li>电脑列表58</li>
    <li>电脑列表59</li>
    <li>电脑列表60</li>
    <li>电脑列表61</li>
    <li>电脑列表62</li>
    <li>电脑列表63</li>
    <li>电脑列表64</li>
    <li>电脑列表65</li>
    <li>电脑列表66</li>
    <li>电脑列表67</li>
    <li>电脑列表68</li>
    <li>电脑列表69</li>
    <li>电脑列表70</li>
    <li>电脑列表71</li>
    <li>电脑列表72</li>
    <li>电脑列表73</li>
    <li>电脑列表74</li>
    <li>电脑列表75</li>
    <li>电脑列表76</li>
    <li>电脑列表77</li>
    <li>电脑列表78</li>
    <li>电脑列表79</li>
    <li>电脑列表80</li>
    <li>电脑列表81</li>
    <li>电脑列表82</li>
    <li>电脑列表83</li>
    <li>电脑列表84</li>
    <li>电脑列表85</li>
    <li>电脑列表86</li>
    <li>电脑列表87</li>
    <li>电脑列表88</li>
    <li>电脑列表89</li>
    <li>电脑列表90</li>
    <li>电脑列表91</li>
    <li>电脑列表92</li>
    <li>电脑列表93</li>
    <li>电脑列表94</li>
    <li>电脑列表95</li>
    <li>电脑列表96</li>
    <li>电脑列表97</li>
    <li>电脑列表98</li>
    <li>电脑列表99</li>
    <li>电脑列表100</li>
  </ul>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      margin: 100px auto 0;
      overflow: scroll;
      background-color: #ccc;
    }

    .nav {
      background-color: #f00;
      color: #fff;
      position: sticky;
      top: 0;
    }
  </style>
</head>
<body>

  <div class="box">
    <h1>我是标题</h1>
    <div class="nav">
      <span>电脑</span>
      <span>手机</span>
      <span>衣服</span>
      <span>鞋子</span>
    </div>
    <ul>
      <li>电脑列表1</li>
      <li>电脑列表2</li>
      <li>电脑列表3</li>
      <li>电脑列表4</li>
      <li>电脑列表5</li>
      <li>电脑列表6</li>
      <li>电脑列表7</li>
      <li>电脑列表8</li>
      <li>电脑列表9</li>
      <li>电脑列表10</li>
      <li>电脑列表11</li>
      <li>电脑列表12</li>
      <li>电脑列表13</li>
      <li>电脑列表14</li>
      <li>电脑列表15</li>
      <li>电脑列表16</li>
      <li>电脑列表17</li>
      <li>电脑列表18</li>
      <li>电脑列表19</li>
      <li>电脑列表20</li>
      <li>电脑列表21</li>
      <li>电脑列表22</li>
      <li>电脑列表23</li>
      <li>电脑列表24</li>
      <li>电脑列表25</li>
      <li>电脑列表26</li>
      <li>电脑列表27</li>
      <li>电脑列表28</li>
      <li>电脑列表29</li>
      <li>电脑列表30</li>
      <li>电脑列表31</li>
      <li>电脑列表32</li>
      <li>电脑列表33</li>
      <li>电脑列表34</li>
      <li>电脑列表35</li>
      <li>电脑列表36</li>
      <li>电脑列表37</li>
      <li>电脑列表38</li>
      <li>电脑列表39</li>
      <li>电脑列表40</li>
      <li>电脑列表41</li>
      <li>电脑列表42</li>
      <li>电脑列表43</li>
      <li>电脑列表44</li>
      <li>电脑列表45</li>
      <li>电脑列表46</li>
      <li>电脑列表47</li>
      <li>电脑列表48</li>
      <li>电脑列表49</li>
      <li>电脑列表50</li>
      <li>电脑列表51</li>
      <li>电脑列表52</li>
      <li>电脑列表53</li>
      <li>电脑列表54</li>
      <li>电脑列表55</li>
      <li>电脑列表56</li>
      <li>电脑列表57</li>
      <li>电脑列表58</li>
      <li>电脑列表59</li>
      <li>电脑列表60</li>
      <li>电脑列表61</li>
      <li>电脑列表62</li>
      <li>电脑列表63</li>
      <li>电脑列表64</li>
      <li>电脑列表65</li>
      <li>电脑列表66</li>
      <li>电脑列表67</li>
      <li>电脑列表68</li>
      <li>电脑列表69</li>
      <li>电脑列表70</li>
      <li>电脑列表71</li>
      <li>电脑列表72</li>
      <li>电脑列表73</li>
      <li>电脑列表74</li>
      <li>电脑列表75</li>
      <li>电脑列表76</li>
      <li>电脑列表77</li>
      <li>电脑列表78</li>
      <li>电脑列表79</li>
      <li>电脑列表80</li>
      <li>电脑列表81</li>
      <li>电脑列表82</li>
      <li>电脑列表83</li>
      <li>电脑列表84</li>
      <li>电脑列表85</li>
      <li>电脑列表86</li>
      <li>电脑列表87</li>
      <li>电脑列表88</li>
      <li>电脑列表89</li>
      <li>电脑列表90</li>
      <li>电脑列表91</li>
      <li>电脑列表92</li>
      <li>电脑列表93</li>
      <li>电脑列表94</li>
      <li>电脑列表95</li>
      <li>电脑列表96</li>
      <li>电脑列表97</li>
      <li>电脑列表98</li>
      <li>电脑列表99</li>
      <li>电脑列表100</li>
    </ul>
  </div>

</body>
</html>

十八、position值对比

十九、CSS属性 - z-index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      position: fixed;
      width: 100px;
      height: 100px;
      left: 0;
      top: 0;
      background-color: #f00;
    }

    .box2 {
      left: 20px;
      top: 20px;
      background-color: #0f0;
      z-index: -1;
    }

    .box3 {
      left: 40px;
      top: 40px;
      background-color: #00f;
    }
  </style>
</head>
<body>
  
  <div class="item box1">1</div>
  <div class="container">
    <div class="item box2">2</div>
  </div>
  <div class="item box3">3</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      position: fixed;
      width: 100px;
      height: 100px;
      left: 0;
      top: 0;
      background-color: #f00;
    }

    .box2 {
      left: 20px;
      top: 20px;
      background-color: #0f0;
      z-index: -1;
    }

    .box3 {
      left: 40px;
      top: 40px;
      background-color: #00f;
    }

    .info {
      position: absolute;
      z-index: 999;
    }
  </style>
</head>
<body>
  
  <div class="item box1">1</div>
  <div class="container">
    <div class="item box2">
      <div class="info">哈哈哈</div>
      <div>呵呵呵</div>
    </div>
  </div>
  <div class="item box3">3</div>

</body>
</html>

css元素定位：通过元素的标签或者元素的id、class属性定位
caixiangting的博客
09-06 8902
大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好理解一些。css元素定位方式往往被忽略掉了，其实css元素定位方式也有它的价值；相对于xpath元素定位方式来说，
UI自动化测试 —— CSS元素定位实践！
2301_77709772的博客
08-23 843
自动化测试元素定位是指在自动化测试过程中，通过特定的方法或策略来准确识别和定位页面上的元素，以便对这些元素进行进一步的操作或断言。这些元素可以是文本框、按钮、链接、图片等HTML页面上的任何可见或不可见的组件。
css 元素定位
zhyue28的博客
05-08 278
定位方式 4+1：利用position有4种，一种float position定位 静态定位（文档流定位）默认状态： static， 块级元素从上到下排列，行内元素从左向右排列，元素的位置通过元素的外边距控制。 相对定位：relative，元素不脱离文档流，通过left/right/top/bottom从元素初始位置做位置偏移 当元素需要改变位置，并且其它元素不受影响的情况使用相对定位 ...
CSS定位
最新发布
xrkhy的博客
04-05 1093
学习css定位
[CSS] CSS元素定位
一起来看烟花吧的博客
04-14 4263
元素定位 定位就是将指定元素放到页面的任意位置。通过定位可以任意摆放元素，比浮动强大。可以通过position来设置。 可以通过position来设置 可选值 static默认值，元素没有开启定位 ralative开启元素相对定位 absolute开启元素绝对定位 fixed开启元素固定地位（固定定位也是绝对定位的一种） relative 通过position: relative;开启相对定位 开启后，可以通过left，right，top，bottom来设置元素的偏移量，left表示元素相对于其定位位置的
【CSS】CSS定位元素
kakaai77的博客
03-31 2055
但这样有一个缺点，海报图对于一个网站上很重要的，应该用img标签实现。当一个定位元素的层级设置为负整数时，层级没有标准流的层级高。​ 元素按照标准流布局，所有元素的默认定位是static。方法1：利用background-position来进行。设置绝对定位元素的垂直水平居中。方法2:利用相对定位。
CSS中的元素和定位
qq_36113598的博客
01-05 444
个人博客地址：CSS中的元素和定位 元素 块级元素(display：block)：p、h1、div等元素 这些元素显示为一块内容，即”块框” 行内元素(display：inline)：strong、span等元素 这些内容显示在行中，即”行内框” 行内盒元素（display：inline-block）：顾名思义，这个定义使得元素像行内元素一样水平依次排列，但是框的内容仍然符合块级框的
CSS元素定位详解与实战应用
10-09
本文档详细讲解了CSS元素定位的各种方式及其应用场景。涵盖了五种定位模式：标准流、相对定位、绝对定位、固定定位和粘性定位。首先介绍了各个定位类型的定义和特点，在此基础上讨论了不同定位方式的操作方法、具体...
CSS 元素定位详解与实战应用
10-09
本文详细讲解了 CSS 中多种元素定位的方法及其应用场景，具体涉及静态定位(static)，相对定位(relative)，绝对定位(absolute)，固定定位(fixed)以及粘性定位(sticky)，同时解释了每种定位方式的工作机制和相关属性...
自动化测试CSS元素定位
OKCRW的博客
01-20 768
对于复合class，如<input class=”btn btn-lg btn-default” type=”text”>，直接写上所有的class即可，即：driver.find_element_by_css_selector(“input. btn.btn-lg.btn-default”)driver.find_element_by_css_selector('input.s_ipt').send_keys('丸子')img[alt=”点我试试呀”][src=”/images/bg.jpg”]
Css选择器定位元素（超详细）
liu__yyy的博客
12-13 2986
CSS选择器 是用来选择 HTML 元素的一种方式，它是 CSS 中非常重要的一部分。它使得我们可以基于元素的 id、class、类型、属性或其他特性来应用样式或用于爬虫定位。在自动化的上下文中，CSS选择器也可以用于定位和拟人操作。选择作为父元素的最后一个子元素。
css元素定位
一只臭皮匠的博客
10-24 399
id用“#” class用“.” 1、使用绝对路径来定位元素：（建议少用） id 用"#"号 class 用"." driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div#u1 a +a")).click(); 2、使用相对路径来定位元素 driver.findElement(By.cssSelector("div#u1 a +a")).click(); By.cssSel.
CSS中元素定位
weixin_41350225的博客
12-04 267
position用于设置元素定位 元素的属性值 属性值 描述 static 默认值，采用元素默认的定位方式 relative 使元素对其原始位置进行“相对定位” absolute 使元素根据父（祖先）父元素的定位情况进行“绝对定位” fixed 使元素相对于浏览器窗口进行“固定定位” 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在...
css元素定位方式
wufeiqiang的博客
02-29 820
css元素定位方式 1、static：默认值；没有定位； （可以用于取消元素之前的定位设置） 2、relative：相对定位 （参照物：自己所在的位置） 特点： 如果没有定位偏移量，对元素本身没有任何影响 不使元素脱离文档流，空间是会被保留。 不影响其他元素布局 left、top、right、bottom是相对于当前元素自身进行偏移的 ，不能独自 存在，必须配...
CSS中如何“定位”元素
Tech_web的专栏
12-19 2608
CSS中，元素的“定位”运用好了，会给您的网站增添特色。本文只是抛砖引玉，不喜勿拍砖。 这里要讲的“定位”是广意上的包含了：定位、浮动、clip、float、clean。 在这里先说明一下，内容在页面上显示是以屏幕左上角为原点，分别向屏幕右（X）和屏幕下（Y），建立像素点。正值为往屏幕右、下延伸，负数则反之。 CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS元素定位总结
chen__cheng的博客
04-24 686
CSS元素定位总结1. relative相对定位2. absolute绝对定位3. 定位元素尺寸问题4. 纵向重叠5. 固定定位6. 粘性定位 为什么需要定位？当需要对某些元素设定在特殊的位置的时候，则需要进行定位操作。定位操作比较灵活，可以使得元素的位置在页面任何地方进行显示。但是定位在页面布局中也不是权宜之计，原因：当两个元素在同一文档流中中的时候，增加一个元素的高度/宽度，另一个元素会随着文档流自动增加/减少。浮动也是如此，会随着父元素的位置变化而变化。但是如果使用定位来布局两个元素，当一个元素高度/
css中元素的定位
hua___sir的博客
02-19 306
float浮动：定义元素在哪个方向上浮动，通常是用在图像上，然后使文字围绕周围，但是，实际使用中，任何元素都可以浮动了，并且，设置此属性后，该元素会生成一个块级框，近乎等于将其转化为了块级元素； position属性中的absolute、relative和fixed，先说absolute绝对定位，设置绝对定位的元素，其定位标准为：其最接近的一个具有定位属性的父元素包含块，如没有此类元素，则相对于
selenium怎么css元素定位
07-28
你可以使用 Selenium 中的 `find_element_by_css_selector` 方法来定位 CSS 元素。下面是一个示例代码： ```python from selenium import webdriver # 创建一个浏览器实例 driver = webdriver.Chrome() # 打开网页 driver.get("https://www.example.com") # 使用 CSS 选择器定位元素 element = driver.find_element_by_css_selector("body > div.container > h1") # 打印元素文本内容 print(element.text) # 关闭浏览器 driver.quit() ``` 在上面的示例中，`find_element_by_css_selector` 方法接受一个 CSS 选择器作为参数，然后返回匹配的第一个元素。你可以根据需要修改 CSS 选择器来定位不同的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值