实训前端-定位

最新推荐文章于 2024-06-24 13:05:13 发布

_C9

最新推荐文章于 2024-06-24 13:05:13 发布

阅读量49

点赞数

分类专栏： # javaweb

本文链接：https://blog.csdn.net/weixin_45720782/article/details/118308116

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位：脱离DOM流指定组件在哪里展示</title>
		<style>
			.totop{
				height: 50px;
				width: 50px;
				border-radius: 50%;
				background-color: aquamarine;
				/*定位*/
				position: fixed;
				/*定位之后两个属性才起作用*/
				right: 80px;
				bottom: 80px;
			}
			body{
				height: 2000px;
			}
			.box{
				height: 100px;
				background-color: bisque;
			}
			.box1{
				height: 100px;
				width: 100px;
				background-color: cadetblue;
				position: relative;
				top: 30px;
				left: 50px;
			}
			.box2{
				height: 50px;
				width: 50px;
				background-color: pink;
				position: absolute;
				top: 0px;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<!--
			静态定位（不定位）：按照dom流来布局  static
			窗口定位：以窗口为参照物来定位并且不占空间  fixed
			相对定位：relative,占原来的空间，参照物为自身原来的位置“肉体还在灵魂飞走了”（一般不单独使用,多数用来定义参照物）
			绝对定位：参照物：第一个非static定位的父组件，如果找不到这样的父组件，参照物就是html，不占空间  absolute;
		-->
		<div class='totop'></div>
		<div class='box1'></div>
		<div class='box'></div>
		<div class='box2'></div>
	</body>
</html>

_C9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训前端-定位

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>定位：脱离DOM流指定组件在哪里展示</title> <style> .totop{ height: 50px; width: 50px; border-radius: 50%; background-color: aquamarine; /.
复制链接

扫一扫

专栏目录