DIV+CSS定位position

╰+哭是因爲堅強的太久メ 2022-08-01 01:26 367阅读 0赞

position属性

该属性是用于对元素进行定位。

css的三种定位机制

普通流，浮动和绝对定位

普通流：普通流中的元素的位置由元素在 (X)HTML 中的位置决定。普通流包含了相对定位给，元素依然占据普通流中的起始位置，可以根据起始位置进行偏移。

浮动：脱离了普通流，不会被普通流中的元素影响定位，但会被同样是浮动的元素影响。

绝对定位：脱离了普通流，不会占据普通流中的元素位置以及不被其中的元素影响，位置被所属包块影响。

position的属性值static，relative，absolute，fixed

static：

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

图解说明

static：

因为staticBox是块级元素，而其又在普通流中，所以static的div占据了一行，然后从上往下展示其他div。

Center

代码：

  1. <html>
  2.          <head>
  3.                    <styletype="text/css">
  4.                             .mainBox{
  5.                                      margin:0px10px;
  6.                                      width:400px;
  7.                                      height:400px;
  8.                                      position:relative;
  9.                                      background:#FF0000;
  10.                             }
  11.                             .sourceBox{
  12.                                      float:left;
  13.                                      width:100px;
  14.                                      height:100px;
  15.                                      position:relative;
  16.                                      background:#00FFFF;
  17.                             }
  18.                             .staticBox{
  19.                                      width:100px;
  20.                                      height:100px;
  21.                                      position:static;
  22.                                      background:#00FF00;
  23.                             }
  24.                    </style>
  25.          </head>
  26.          <body>
  27.                    <divclass="staticBox">staticBox
  28.                    </div>
  29.                    <divclass="mainBox">
  30.                             <divclass="sourceBox">
  31.                             </div>
  32.                             <divclass="sourceBox">
  33.                             </div>
  34.                             <divclass="sourceBox">
  35.                             </div>
  36.                             <divclass="sourceBox">
  37.                             </div>
  38.                             <divclass="sourceBox">
  39.                             </div>
  40.                             <divclass="sourceBox">
  41.                             </div>
  42.                             <divclass="sourceBox">
  43.                             </div>
  44.                    </div>
  45.          </body>
  46. </html>

relative：

因为relativeBox依然归属于普通流的范围内，其依然占据起始位置，然后使用偏移属性left，top，right，bottom进行属性设置。

Center 1 

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             .mainBox{
  5.                 float:left;
  6.                 margin:0px 10px;
  7.                 width:400px;
  8.                 height:400px;
  9.                 position:relative;
  10.                 background:#FF0000;
  11.             }
  12.             .sourceBox{
  13.                 float:left;
  14.                 width:100px;
  15.                 height:100px;
  16.                 position:relative;
  17.                 background:#00FFFF;
  18.             }
  19.             .relativeBox{
  20.                 z-index:10;
  21.                 float:left;
  22.                 width:100px;
  23.                 height:100px;
  24.                 position:relative;
  25.                 left:50px;
  26.                 top:50px;
  27.                 background:#00FF00;
  28.             }
  29.         </style>
  30.     </head>
  32.     <body>
  33.         <div class="mainBox">
  34.             <div class="sourceBox">
  35.             </div>
  36.             <div class="relativeBox">relativeBox
  37.             </div>
  38.             <div class="sourceBox">
  39.             </div>
  40.             <div class="sourceBox">
  41.             </div>
  42.             <div class="sourceBox">
  43.             </div>
  44.             <div class="sourceBox">
  45.             </div>
  46.             <div class="sourceBox">
  47.             </div>
  48.             <div class="sourceBox">
  49.             </div>
  50.         </div>
  51.     </body>
  53. </html>

absolute:

因为脱离了普通流，所以其不影响普通流中的其他元素位置。

Center 2 

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             .mainBox{
  5.                 float:left;
  6.                 margin:0px 10px;
  7.                 width:400px;
  8.                 height:400px;
  9.                 position:relative;
  10.                 background:#FF0000;
  11.             }
  12.             .sourceBox{
  13.                 float:left;
  14.                 width:100px;
  15.                 height:100px;
  16.                 position:relative;
  17.                 background:#00FFFF;
  18.             }
  19.             .absoluteBox{
  20.                 z-index:10;
  21.                 width:100px;
  22.                 height:100px;
  23.                 position:absolute;
  24.                 left:50px;
  25.                 top:50px;
  26.                 background:#00FF00;
  27.             }
  28.         </style>
  29.     </head>
  31.     <body>
  32.         <div class="mainBox">
  33.             <div class="sourceBox">
  34.             </div>
  35.             <div class="absoluteBox">absoluteBox
  36.             </div>
  37.             <div class="sourceBox">
  38.             </div>
  39.             <div class="sourceBox">
  40.             </div>
  41.             <div class="sourceBox">
  42.             </div>
  43.             <div class="sourceBox">
  44.             </div>
  45.             <div class="sourceBox">
  46.             </div>
  47.             <div class="sourceBox">
  48.             </div>
  49.         </div>
  50.     </body>
  51. </html>

fixed:

该属性与absolut类似，但是其所属包块一直属于窗口，所以其偏移位置是以窗口的原点为起始的。即时出现滚动条，滚动滚动条时，fixedBox的位置会重新计算，会跟随滚动条一起滚动。类似于一般窗口的跟随广告。

Center 3 

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             .mainBox{
  5.                 margin:0px 10px;
  6.                 width:400px;
  7.                 height:400px;
  8.                 position:relative;
  9.                 background:#FF0000;
  10.             }
  11.             .sourceBox{
  12.                 float:left;
  13.                 width:100px;
  14.                 height:100px;
  15.                 position:relative;
  16.                 background:#00FFFF;
  17.             }
  18.             .fixedBox{
  19.                 z-index:10;
  20.                 width:100px;
  21.                 height:100px;
  22.                 position:fixed;
  23.                 left:50px;
  24.                 top:50px;
  25.                 background:#00FF00;
  26.             }
  27.         </style>
  28.     </head>
  30.     <body>
  31.         <div class="fixedBox">fixedBox
  32.         </div>
  33.         <div class="mainBox">
  34.             <div class="sourceBox">
  35.             </div>
  36.             <div class="sourceBox">
  37.             </div>
  38.             <div class="sourceBox">
  39.             </div>
  40.             <div class="sourceBox">
  41.             </div>
  42.             <div class="sourceBox">
  43.             </div>
  44.             <div class="sourceBox">
  45.             </div>
  46.             <div class="sourceBox">
  47.             </div>
  48.             <div class="sourceBox">
  49.             </div>
  50.         </div>
  51.         <div class="mainBox">
  52.             <div class="sourceBox">
  53.             </div>
  54.             <div class="sourceBox">
  55.             </div>
  56.             <div class="sourceBox">
  57.             </div>
  58.             <div class="sourceBox">
  59.             </div>
  60.             <div class="sourceBox">
  61.             </div>
  62.             <div class="sourceBox">
  63.             </div>
  64.             <div class="sourceBox">
  65.             </div>
  66.             <div class="sourceBox">
  67.             </div>
  68.         </div>
  69.         <div class="mainBox">
  70.             <div class="sourceBox">
  71.             </div>
  72.             <div class="sourceBox">
  73.             </div>
  74.             <div class="sourceBox">
  75.             </div>
  76.             <div class="sourceBox">
  77.             </div>
  78.             <div class="sourceBox">
  79.             </div>
  80.             <div class="sourceBox">
  81.             </div>
  82.             <div class="sourceBox">
  83.             </div>
  84.             <div class="sourceBox">
  85.             </div>
  86.         </div>
  87.     </body>
  88. </html>

发表评论

表情：
评论列表 （有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS position定位

    文档流 文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。让元素脱离文档流的方法

    蔚落蔚落/ 0 赞/ 193 阅读

    相关 position: sticky；粘性定位

    > 想整个滚动条插件，但是里面的元素如果用absolute定位的话，会跟随滚动条滚动，fixed也不好用，偶然查到position: sticky；，确实可以解决这个问题（但兼

    亦凉亦凉/ 0 赞/ 335 阅读

    相关 position定位

    position属性规定元素的定位类型，定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于

    小灰灰小灰灰/ 0 赞/ 284 阅读

    相关 HTML之定位position

    一、CSS定位（Posotioning）属性允许你对元素进行定位， position属性值：      static（默认值）：元素框正常生成。块状元素生成一个人矩形框，作为

    亦凉亦凉/ 0 赞/ 459 阅读

    相关 定位(position)

    定位(position) background-position 背景定位 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。 P

    青旅半醒青旅半醒/ 0 赞/ 604 阅读