CSS中子绝父相布局
来源:互联网 发布:手机淘宝收藏夹在哪里 编辑:程序博客网 时间:2024/05/05 11:14
如果我们要将hot图片放到下图的位置,我们该怎么实现?
首先我们来进行布局,用一个div包括一个a标签和img标签,并给a标签设置样式,如下代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .hot a { display: inline-block; height: 32px; width: 80px; text-decoration: none; /*去掉a标签的默认样式下划线*/ background: url(img/button1.jpg); font-size: 13px; line-height: 32px; text-align: center; } </style></head><body><br/><br/><br/><div class="hot"> <a href="#">首页导航</a><img src="img/hot.png" alt=""></div></body></html>
但是运行后,我们发现hot图片在a标签的旁边
怎么样才能让hot图片到达图片中的位置呢?这里我们就需要使用子绝父相来进行设置了,子绝父相就是指子元素设置绝对定位,而父元素设置相对定位,然后设置子元素的top、left、right、bottom的值,我们就可以让子元素到达相应的位置
给上述代码的style中添加下面的代码,我们就会发现hot图片移动到了目标位置
.hot { position: relative;}.hot img { position: absolute; top: -10px; left: 20px;}
0 0
- CSS中子绝父相布局
- Html+CSS中子选择器
- Android中子布局填充ScrollView
- css中子元素相对于父元素定位
- css布局
- css布局
- css布局
- css-布局
- css布局
- css 布局
- css布局
- CSS~~布局
- css布局
- Css布局:
- CSS布局
- css布局
- css布局
- CSS布局
- 海康/大华监控摄像头直播分享
- 【Jmeter】参数化设置
- Go语言中的 Array, Slice和 Map
- 【java基础之多线程】多线程的创建
- 如何接受二维数组指针的指针
- CSS中子绝父相布局
- MySQL Optimization Part 5 - Optimization Tips
- 漫步线性代数十三——线性变换
- 详细阿里云CentOS服务器安全设置步骤教程
- C#异常处理
- 笔记-Cookie基础知识
- Shiro 认证
- Android开发bug集合
- YUV视频格式详解(翻译自微软文档)