定位

作者: WANGLIN_HZ | 来源:发表于2018-07-10 19:52 被阅读0次
固定定位
<!DOCTYPE html>
<html>
<head>
    <title>固定定位</title>
    <style type="text/css">
        .box1{
            width: 50px;
            height: 50px;
            background-color: red

        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: rgb(177,199,210);
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(210,219,222);
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>
  • 固定定位的元素会被锁定在屏幕的某个位置上,当 访问者滚动网页时,固定元素会在屏幕上保持不动。
  • 当将position属性设置为fixed时,则开启了元素的 固定定位。
  • 当开启了固定定位以后,可以使用top、right、
    bottom、left四个属性对元素进行定位。
  • 固定定位的其他特性和绝对定位类似。

相对定位
<!DOCTYPE html>
<html>
<head>
    <title>相对定位</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: red;

        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*margin-left: 200px;*/
            /*margin-top: 200px;*/
            position: relative;
            left: 100px;

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(122,133,144);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>
  • 每个元素在页面的文档流中都有一个自然位置。相 对于这个位置对元素进行移动就称为相对定位。周 围的元素完全不受此影响。
  • 当将position属性设置为relative时,则开启了元素 的相对定位。
  • 当开启了相对定位以后,可以使用top、right、 bottom、left四个属性对元素进行定位。

绝对定位
  • 绝对定位指使元素相对于html元素或离他最近 的祖先定位元素进行定位。
  • 当将position属性设置为absolute时,则开启 了元素的绝对定位。
  • 当开启了绝对定位以后,可以使用top、right、 bottom、left四个属性对元素进行定位。

相关文章

  • 定位,定位,还是定位

    要想成为一个好的文字的输出者,首先要给自己一个合理的定位。定位可以首先想象自己想成为的角色:一个能够通过各种故事启...

  • 10-CSS定位流

    定位流 定位流分类相对定位绝对定位固定定位静态定位 相对定位 什么是相对定位?相对定位就是相对于自己以前在标准流中...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • 2017-02-23 CSS 学习笔记

    定位流 定位流分类 相对定位 绝对定位 固定定位 静态定位 什么是相对定位相对定位就是相对于自己以前在标准中的位置...

  • #30天专注橙长计划#品牌定位30(6)营销推广1

    品牌定位的维度包括: 市场定位、价格定位、形象定位、地理定位、人群定位、渠道定位等; 经过前期大量的市场调研工作,...

  • D28:系统地图, 高德地图

    目录一. 定位功能 iPhone手机定位(基站定位, WiFi定位, GPS定位: 定位所需时间递增, 精确度递增...

  • 相对定位、绝对定位和固定定位

    1. 相对定位 定位有三种:相对定位,绝对定位、固定定位。 相对定位: position:relative lef...

  • 定位流

    定位流指的是:相对定位(relative)/绝对定位(absolute)/固定定位(fixed) 不包括静态定位(...

  • CSS补充2

    定位position 定位分为四种:相对定位 relative,绝对定位 absolute,固定定位 fixed,...

  • 定位

    1、static定位(普通流定位) -------------- 默认定位 2、float定位(浮动定位) 例:f...

网友评论

      本文标题:定位

      本文链接:https://www.haomeiwen.com/subject/ispqpftx.html