CSS中子绝父相布局

如果我们要将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;
}

CSS中子绝父相布局相关推荐

CSS中的子绝父相布局
前言在CSS中有三种定位方式:相对定位.绝对定位和固定定位一.相对定位相对定位的属性是position:relative,如过对某个元素设置了相对定位,元素就会根据自身左顶点进行位置偏移,元素还 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块
目录何为定位偏移量垂直方向 top bottom 水平方向 left right relative-相对定位何为相对定位相对定位的特点实例元素代码的起始位置元素若不开启相对定位,即便设 ...
第6天-css笔记三大定位-定位子绝父相与精灵图
定位 ================================================================================= 用了子绝父相而带来的子盒子居中 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
css定位-子绝父相
题目要求: 开始的代码: <!DOCTYPE html> <head><meta charset="utf-8" /><link rel= ...
CSS定位—子绝父相
"子绝父相"是学习定位的口诀,这句话的意思是:子级是绝对定位的话,父级用相对定位. ①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方. ②父盒子需要加定位限制子盒子在 ...

CSS中子绝父相布局

CSS中子绝父相布局相关推荐

最新文章

热门文章