用绝对定位做个框架一个图片在右上角一个图片在右下角
时间: 2023-06-12 10:03:37 浏览: 47
可以参考以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
.top-right {
position: absolute;
top: 0;
right: 0;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="https://via.placeholder.com/150" alt="image" class="top-right">
<img src="https://via.placeholder.com/150" alt="image" class="bottom-right">
</div>
</body>
</html>
```
首先,我们创建一个容器 `.container`,并设置宽高以及边框。接着,我们使用相对定位将容器定位在页面中心。
然后,我们在容器中插入两个图片,分别使用绝对定位将它们定位在右上角和右下角。其中,`top:0; right:0;` 表示将图片定位在容器的右上角,`bottom:0; right:0;` 表示将图片定位在容器的右下角。
最后,我们可以通过修改容器的宽高来调整图片的位置。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)