css定位机制详解第一篇_html/css_WEB-ITnose-html教程-PHP中文网

css定位机制详解第一篇_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:52:56

原创

1848人浏览过

css有三种定位机制

标准流
浮动
绝对定位

只要不指定，所有标签均在标准流中定位。块级标签由于独占一行，所以从上到下排列，而行内和行内块级则水平排列。

css position

一切标签皆是框

通过position属性，我们可以选择四种不同类型的定位

static:按标准流定位（村里分地，按照规则正常分）
relative:框偏移某个距离，原本在正常文档流中所占空间仍保留（我分来的地我不种，但还是我的，你分的还是按规则分来的地）
absolute:框从正常文档流中删除（我退出分地，接下来的人可以分这块地），相对于其包含块定位（从父块一直向上找，找到一个不是static的包含块，相对于其定位）
fixed:类似于absolute，不过包含块直接设置为窗口。

talk is less show code!

static就不写了relative

立即学习“前端免费学习笔记（深入）”；

<style>    .left{        position: relative;        left: -20px;    }    .right{        position: relative;        left: 20px;        background-color: blue;    }    .up{        position: relative;        top: -20px;        background-color: yellow;    }    .down{        position: relative;        background-color: red;    }</style><p>原始</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1712">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d35694968678.png" alt="DeepBrain">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1712">DeepBrain</a>
                            <p>AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="DeepBrain">
                                <span>108</span>
                            </div>
                        </div>
                        <a href="/ai/1712" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="DeepBrain">
                        </a>
                    </div>
                <p class="left">原始</p><p class="right">原始</p><p class="up">原始</p><p class="down">原始</p>

登录后复制

屏幕快照 2016-03-27 下午8.08.48.png

我们注意到，黄色的div由于设置了top: -20px，向上偏移了。但是关键的问题来了，接下的红色div仍是按照黄色div原先在文档流中的位置向下定位的，我们将top: -20px;的代码注释掉，结果如下

屏幕快照 2016-03-27 下午8.08.18.png

这就是relative中原本在正常文档流中所占空间仍保留的意思。