CSS元素定位

最新推荐文章于 2024-04-06 19:27:44 发布
最新推荐文章于 2024-04-06 19:27:44 发布
阅读量359 收藏 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>

小袁儿
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css元素定位：通过元素的标签或者元素的id、class属性定位
caixiangting的博客
09-06 8539
大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好理解一些。css元素定位方式往往被忽略掉了，其实css元素定位方式也有它的价值；相对于xpath元素定位方式来说，
设置css元素的位置
qq_35679291的博客
07-04 1457
首先来看一下代码position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);我开始没太在意 以为transform:translate(-50%,-50%); 这样把上面的 top:50%,left:50% 抵消了呢 ! 后来查资料看明白了 不是这样的 首
position 设置元素的定位方式
Black_Straight的博客
06-03 418
position 设置元素的定位方式
div位置设置
weixin_34128501的博客
05-26 2637
div居中显示 　　margin:0 auto div中的内容居中显示 　　text-algin:center div靠右显示 　　float:right 设置div元素的右外边距 　　margin-right:10px
css样式元素的相对定位，绝对定位，固定定位等元素定位运用技巧详解
景天科技苑
03-04 2132
在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
利用CSS3的定位页面元素
12-12
让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。 相关下载：CSS3.0参考手册下载使用一个唯一的日志(post)ID定位所有日志 wordpress提供给我们一种包含了ID的每篇...
CSS中的元素定位方法详解
09-25
在CSS中，元素定位是网页设计的关键组成部分，它允许开发者精确控制元素在页面上的位置。本文将深入探讨CSS中的元素定位方法，主要包括盒模型、定位属性（position）、display属性和float属性。 首先，盒模型是理解...
css position 定位
09-25
CSS中的定位(position)是网页布局的关键，尤其在创建复杂、响应式的页面时。理解position属性对于精确控制元素在页面上的位置至关重要。本篇文章主要探讨了`position`的两种主要值：`relative`（相对定位）和`...
css相对定位使用示例
09-25
css相对定位使用示例 css相对定位是css中的一种基本定位方式，它的特点是相对某个对象进行偏移，而不是相对文档流。相对定位的对象仍然会保留它在文档流中的位置，而不是脱离文档流。 基本概念： 相对定位...
CSS五种定位方式详解
wshwsh_的博客
07-26 3079
position 属性规定应用于元素的定位方法的类型。
CSS系列之定位详解
老__L的博客
02-03 6098
本文主要介绍CSS的bottom、left、right、top、属性。将盒子定在某一个位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面。
CSS#3：定位元素
weixin_62428841的博客
12-10 635
元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用background-color属性），也可以包含任意多个背景图片（使用background-image属性），背景图片叠加在背景颜色之上。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间也足以容纳它们，它们就会并列排在一行。被清除的元素不会被提升到浮动元素的旁边。
CSS之定位
m0_74577714的博客
01-28 1070
定位在CSS当中是一个比较重要的点，接下来，让我为大家介绍一下定位吧！
CSS四种定位方式的详解
2401_83703999的博客
03-29 1010
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车！！通车！！[外链图片转存中…(img-54QMY8DP-1711654977632)]点击资料领取直通车！！
css元素定位
一只臭皮匠的博客
10-24 335
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中的定位详解
最新发布
2401_84092483的博客
04-06 710
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
十分钟轻松搞懂CSS的五大定位方式！（建议收藏）
Erya Programming learning
05-31 2088
一、CSS之position定位方式 position 属性规定元素的定位类型，有以下五种： static relative absolute(脱离文档流) fixed（脱离文档流） sticky（新属性） 两种脱离正常文档流的定位方法，会把元素的宽高设置成内容的宽高 常用 top/bottom/left/right 属性进行偏移 1.static 静态定位，是position的默认值，可不设置。 默认布局方式，从上到下，从左到右，正常文档流。 position: static; 2.relative
css中如何调整元素位置
杜永康的博客
09-02 9645
当这个div变成弹性容器时，那弹性容器对应的项目属性才有用，才会有效果。5种方法去解决元素位置问题，诚然，如果掌握了弹性容器，就完全没有必要使用float，但是transform却还是非常常用的。我们通常把样式层叠表叫做css，它是用来修饰html内容的，给内容加各种各样的样式和效果。可以使用top， left， right， bottom四个方向的值去调整元素的位置。absolute 绝对定位，根据最近的有定位方式的父元素进行定位。sticky 粘性定位，根据页面滚动的位置进行定位，
selenium怎么css元素定位
07-28
你可以使用 Selenium 中的 `find_element_by_css_selector` 方法来定位 CSS 元素。下面是一个示例代码： ```python from selenium import webdriver # 创建一个浏览器实例 driver = webdriver.Chrome() # 打开...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值