css 绝对定位和相对定位

绝对定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间。

绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值,则相对于整个网页。

 实例1:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>元素定位实例</title>
    <style>
    p {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 100px;
        left: 0px;
        background-color: #c8edff;
    }

    div {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 80px;
        left: 180px;
        border: 1px solid;
    }
    </style>
</head>

<body>
    <h3>css绝对定位的应用</h3>
    <hr>
    <p>该段落是相对于页面定位,距离页面的顶部100像素,距离左边0像素</p>
    <div>我是相对于页面定位的div元素,距离顶端80像素,距离左边180像素
        <p>该段落是相对于父元素div定位的,距离div元素的顶端100像素,距离div元素的左边0像素</p>
    </div>
</body>

</html>

 页面效果:

 本实例包含两个样式完全相同的段落元素<p>,用于对比测试直接在页面中使用和嵌入已定位的<div>元素中两种情况。

 

 

相对定位 

相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置,也仍然从原始的起点处占据空间。

实例2:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>元素定位实例</title>
    <style>
    div {

        width: 200px;
        height: 380px;
        border: 1px solid;
        margin-left: 50px;
    }

    p {

        width: 150px;
        height: 100px;
        background-color: #c8edff;
    }

    .left {
        position: relative;
        left: -50px;
    }

    .right {
        position: relative;
        left: 130px;
    }
    </style>
</head>

<body>
    <h3>css相对定位的应用</h3>
    <hr>
    <div>
        <p>正常段落的状态</p>
        <p class="left">相对自己的正常位置向左偏移了50像素</p>
        <p class="right">相对自己的正常位置向右偏移了130像素</p>
    </div>
</body>

</html>

页面效果:

 

本实例包含了三个样式相同的段落元素<p>,用于对比测试相对定位的效果,并声明了一个带有实线边框效果的<div>元素包含这三个段落元素,以便对比段落元素的偏移量。 

 

  • 21
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
### 回答1: CSS中的绝对定位相对定位是用于控制元素位置的两种常用方法。它们的区别如下: 1. 相对定位 相对定位是指相对于元素原本所在的位置进行定位。它通过使用 `top`, `right`, `bottom` 和 `left` 属性来控制元素的位置。例如,我们可以使用以下代码将一个元素相对于其原本的位置向下移动20个像素: ```css position: relative; top: 20px; ``` 2. 绝对定位 绝对定位是指相对于最近的已定位祖先元素(即指定了 `position` 属性且不为 `static` 的元素)进行定位。如果没有已定位的祖先元素,则相对于文档的 `body` 元素进行定位。和相对定位一样,我们可以使用 `top`, `right`, `bottom` 和 `left` 属性来控制元素的位置。例如,我们可以使用以下代码将一个元素相对于其最近的已定位祖先元素向右移动50个像素: ```css position: absolute; right: 50px; ``` 总的来说,相对定位绝对定位都是用于控制元素位置的方法,但它们的定位方式有所不同。相对定位相对于元素原本的位置进行定位,而绝对定位相对于最近的已定位祖先元素进行定位。 ### 回答2: CSS绝对定位相对定位是一种CSS布局技术,用于控制元素在网页中的位置相对定位相对于元素原来所在的位置进行定位。通过将元素的position属性设置为relative,元素将会相对于自己原来所在的位置进行移动,移动后的位置由top、right、bottom和left属性来控制。相对定位不会改变文档流中其他元素的位置,所以当一个元素被相对定位后,其他元素仍然按照原来的顺序和位置排列。 绝对定位则是相对于最近的非静态定位的祖先元素(如果不存在则相对于文档的body元素)进行定位。通过将元素的position属性设置为absolute,元素将会脱离文档流,不再占据原来的位置绝对定位位置也是由top、right、bottom和left属性来控制。绝对定位会改变其他元素的位置,当一个元素被绝对定位后,其他元素会填补改元素脱离文档流后的空白区域。 相对定位绝对定位的特点和用途不同。相对定位用于微调元素的位置,通常与其他定位方式(如静态定位或浮动定位)一起使用,达到更灵活的布局效果。绝对定位则更适合创建自定义的布局,可以把元素摆放在页面的任何位置。无论是相对定位还是绝对定位,都可以通过配合使用z-index属性来调整元素的层次顺序,实现不同元素的遮盖效果。 综上所述,CSS绝对定位相对定位都是布局技术,使用不同的定位原点来实现元素的定位相对定位相对于元素原来的位置进行定位,而绝对定位相对于最近的非静态定位的祖先元素进行定位
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值