绝对定位和相对定位以及伪元素

Code

HTML

 <!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位与绝对定位以及伪元素</title>
  <link rel="stylesheet" href="main.css">
  <script src="./main.js"></script>
</head>
 
<body>
  <div class="img-container">
    <img src="../asserts/images/pixiv 102215084 p2.png" alt="小兔娘">
  </div>
</body>
 
</html>

 body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* flex布局：使居中 */
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
 
.img-container {
  width: 50vw;
  height: 50vh;
  /* 设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用 */
  position: relative;
}
 
img {
  width: 100%;
  height: 100%;
  /* 图片填充img方式，等比缩小还是铺满 */
  object-fit: fill;
}
 
.img-container::before {
  /* 
      绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角，
      如果没有父元素采用相对定位，则相对于html标签 
  */
  content: '';/* 如果不需要文本，必须写上这行 */
  position: absolute;
  /* 尺寸和位置一定要写 */
  right: 5rem;
  bottom: 5rem;
  width: 48px;
  height: 48px;
 
  background-image: url("../asserts/images/like.svg");
  background-size: contain;
}

JAVASCRIPT

  // 没有用到 js

Result

用到的图片：

Conclusion

设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用
绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角
如果没有父元素采用相对定位，则相对于html标签，元素会出现在浏览器窗口的指定位置
注意伪类和伪元素的区别

Reference

https://q.cnblogs.com/q/143685/

New Discovery

svg标签可以直接在页面上展示，我从来都没有试过这么写

 <svg t="1692856208711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5360" width="48" height="48"><path d="M724.992 58.026667c-84.309333 0-162.474667 42.325333-214.016 111.957333C459.434667 100.352 380.928 58.026667 296.96 58.026667 145.066667 58.026667 21.504 193.194667 21.504 359.082667c0 98.986667 44.373333 168.277333 79.872 224.256C204.8 745.472 464.554667 947.2 475.477333 955.733333c10.581333 8.192 22.869333 12.288 35.498667 12.288 12.288 0 24.917333-4.096 35.157333-12.288 10.922667-8.533333 271.018667-210.261333 374.101333-372.394667 35.498667-55.978667 79.872-125.269333 79.872-224.256C1000.106667 193.194667 876.544 58.026667 724.992 58.026667L724.992 58.026667 724.992 58.026667 724.992 58.026667zM724.992 58.026667" fill="#d81e06" p-id="5361"></path></svg>

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/17654052.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2023-08-24 14:32 echo_lovely 阅读(114) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css的度量单位：px、em、rem、vh、vw、vmin、vmax、百分比

· css 各种居中

· 【JavaWeb】CSS绝对定位和相对定位

· CSS position 相对定位和绝对定位

· 前端css基础

公告

绝对定位和相对定位以及伪元素

发表于 2023-08-24 14:32阅读：114评论：0推荐：0

Html&Css Html&Css

关注

跳至底部

昵称： echo_lovely
园龄： 5年5个月
粉丝： 39
关注： 12

+加关注

随笔分类

随笔档案

文章分类

C#(1)

echo

绝对定位和相对定位以及伪元素

Code

Result

Conclusion

Reference

New Discovery

公告

echo_lovely

绝对定位和相对定位以及伪元素

搜索

常用链接

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>相对定位与绝对定位以及伪元素</title>
	<link rel="stylesheet" href="main.css">
	<script src="./main.js"></script>
	</head>

	<body>
	<div class="img-container">
	<img src="../asserts/images/pixiv 102215084 p2.png" alt="小兔娘">
	</div>
	</body>

	</html>

	body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	/* flex布局：使居中 */
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	}

	.img-container {
	width: 50vw;
	height: 50vh;
	/* 设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用 */
	position: relative;
	}

	img {
	width: 100%;
	height: 100%;
	/* 图片填充img方式，等比缩小还是铺满 */
	object-fit: fill;
	}

	.img-container::before {
	/*
	绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角，
	如果没有父元素采用相对定位，则相对于html标签
	*/
	content: '';/* 如果不需要文本，必须写上这行 */
	position: absolute;
	/* 尺寸和位置一定要写 */
	right: 5rem;
	bottom: 5rem;
	width: 48px;
	height: 48px;

	background-image: url("../asserts/images/like.svg");
	background-size: contain;
	}