CSS定位

最新推荐文章于 2024-10-20 16:51:54 发布

等猫的鱼qv

最新推荐文章于 2024-10-20 16:51:54 发布

阅读量71

点赞数 1

文章标签： css html css3 python

本文链接：https://blog.csdn.net/qvqqv/article/details/130265210

版权

本文详细介绍了CSS中的四种定位方式：静态定位、相对定位、绝对定位和固定定位，并通过实例进行演示。还讨论了定位层级的概念以及如何通过z-index控制元素的显示优先级。最后提到了CSS样式重置在解决浏览器兼容性问题中的重要性。

摘要由CSDN通过智能技术生成

CSS定位

（1）前言
（2）范例
（3）静态定位
（4）相对定位
（5）绝对定位
（6）定位层级
（7）固定定位
（8）重置样式

（1）前言

定位就是将元素定在网页中的任意位置，定位偏移量：top、right、bottom、left。一共有四种定位：

static 静态定位(没有定位)，默认
relative 相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置
absolute 绝对定位，没有占据位置，使元素完全脱离文档流；没有定位父级，则相对整个文档发生偏移；参考最近非static定位的父级进行定位
fixed 固定定位，相对于浏览器窗口进行定位方形词； left 、right、 top、 bottom

（2）范例

接下来使用三个div块来进行举例：

<head>
    <meta charset="UTF-8">
    <title>范例</title>
    <style>
        .box1{
     width: 100px;height: 100px;background:red }
        .box2{
     width: 100px;height: 100px;background:blue;}
        .box3{
     width: 100px;height: 100px;background:green;}
    </style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div>
</body>

在这里插入图片描述
我们通过四种定位方式将上面的方块变成下面我们想要的形式：

（3）静态定位

静态定位就是没有定位，我们可以使用设置内外边距的方法来实现块移动。

<head>
    <meta charset="UTF-8">
    <title>范例</title>
    <style>
        .box1{
     width: 100px;height: 100px;background:red }
        .box2{
     width: 100px;height: 100px;background:blue;margin-left: 100px;
        margin-top: 100px;}        /*设置左外边距和上外边距*/
        .box3{
     width: 100px;height: 100px;background:green;margin-top: -100px;}  
        /*由于没有浮动，块2占用的块3的位置，所以需要给块3加上一个负的上外边距*/
    </style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div>
</body>