网页搭建入门---CSS定位position

最新推荐文章于 2024-04-25 18:45:11 发布

joker柒月

最新推荐文章于 2024-04-25 18:45:11 发布

阅读量284

点赞数 1

分类专栏： Java工程师

本文链接：https://blog.csdn.net/qwl755/article/details/105716873

版权

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-fixed</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .ad-right-float {
            position: fixed;
            bottom: 50px;
            right: 0;
            width: 80px;
            height: 80px;
            background: gray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="ad-right-float">
        悬停广告
    </div>
</body>
</html>

relative 定位

相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-relative</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
		.parent {
			width:300px;
			height:300px;
			background: blue;
		}
		.parent div {
			width: 80px;
			height: 80px;
		}
        .sub-1 {
        	position:relative;
        	background: red;
        	top:20px;
        	left: 50px;
        }
        .sub-2 {
			background: green;
        }

    </style>
</head>
<body>
    <div class="parent">
    	<div class="sub-1"></div>
    	<div class="sub-2"></div>
    </div>
    <div class=""></div>
</body>
</html>

最低0.47元/天解锁文章

joker柒月

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页搭建入门---CSS定位position

static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：relative 定位相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。<!DO...
复制链接

扫一扫