Rumah > hujung hadapan web > tutorial css > css相对定位

css相对定位

无忌哥哥
Lepaskan: 2018-06-28 17:53:19
asal
2632 orang telah melayarinya

定位的四种模式:static,relative,absolute,fixed

定位的四个位置:left,right,top,bottom

定位属性:position,有四种状态值

1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效

2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效

3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效

4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1.相对定位</title>
    <style>
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
 position: relative;
            top:0;
            left:200px;
        }
        .box2 {
            width:200px;
            height: 200px;
            background-color: lightgreen;
            /*position: static;*/
        }
        .box3 {
            width:200px;
            height: 200px;
            background-color: lightcoral; /*珊瑚色*/
            /*position: static;*/
            /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/
            position:relative;
            top: -200px;
            left: 400px;
        }
        .box4 {
            width:200px;
            height: 200px;
            background-color: brown;
            /*position: static;*/
            /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/
            position:relative;
            top: -200px;
            left: 200px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci css相对定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan