HTML连载59-子绝父相
一、子绝父相
1.只使用相对定位，对图片的位置进行精准定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:800px;
height:50px;
background-color: red;
margin:0 auto;
}
ul li{
float:left;
width:100px;
height: 50px;
text-align:center;
background-color: yellow;
line-height: 50px;
}
ul li:nth-of-type(4){
/*这里复习了同类标签选择第几个进行设置它的样式*/
background-color: blue;
}
ul li img{
position:relative;
left: -30px;
top: -14px;
width: 20px;
height: 16px;
/*这里可以先写个大概的数字，然后利用谷歌开发者定位进行滚动数据调节*/
}
</style>
</head>
<body>
<ul>
<li>拍卖金融</li>
<li>美妆馆</li>
<li>京东超市</li>
<li>
全球购<img src="bear.jpg">
</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li></li>
</ul>
</body>
</html>
这种方式的的缺点：可以看到虽然利用相对定位进行了数据调节来达到让图片定位的效果，但是由于相对定位是在标准流的基础上进行调节，所以原来图片的位置（也就是全球购后面的那块区域）依然是被占用着的。
2.下面只使用绝对定位来进行试验。
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
这种方式的缺点：上次连载说到，绝对定位会以首屏来进行定位，因此当改变网页大小的时候，将会造成变形，定位到了不合理的地方。
3.因此要同时运用绝对定位和相对定位进行编排才最合理
ul li:nth-of-type(4){
/*这里复习了同类标签选择第几个进行设置它的样式*/
background-color: blue;
position:relative;
}
ul li img{
/*介绍一个方法：子绝父相，即子元素使用绝对定位，父元素使用相对定位*/
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}
三、源码：
D153_SubAbsoluteFathRelative.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载59-子绝父相的更多相关文章
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- CSS中的父相子绝布局
主要应用场景,就是我想要块的布局根据父级来定位,而不是根据页面. 例如,下面的例子中,我用两个半圆拼成一个正圆,思路是用一个父级标签把两个子标签包起来,父标签是一个正圆,然后子标签各占一半,先化成两个 ...
- CSS定位中“父相子绝”
一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...
- Vue父子组件传值以及父调子方法、子调父方法
稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...
- sql server 子找父和父找子
父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...
- ylb：子查询（嵌套子查询）和子查询（相关子查询）
ylbtech-SQL Server:SQL Server-子查询(嵌套子查询)和子查询(相关子查询) SQL Server 子查询(嵌套子查询)和子查询(相关子查询). 1,ylb:1,子查询(嵌套 ...
- vue 实现子向父传值
父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
随机推荐
- ECMAScript基本语法——⑤运算符 一元运算符
++自增 在前先自增,再运算 在后先运算,再自增 --自减 在前先自减,再运算 在后先运算,再自减 +正号,-负号.表示数字的正负 注意:在JavaScript中,如果运算数不是运算符要求的类型, 那 ...
- jenkins 集成环境搭建
http://www.cnblogs.com/jenniferhuang/p/3355252.html
- 记录 shell学习过程（9）正则表达式 转自树明聊运维
正则表达式 正则表达式介绍 特殊字符 POSIX特殊字符 一.正则表达式介绍 正则表达式是一种文本模式匹配,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符") ...
- java课后作业2
动手动脑 编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数 import java.util.Random;import java.util.Scanner;public class ...
- MySQL加号+ 的作用
案例:查询员工名和员工姓,连接成一个字段,并显示为: 姓名 SELECT last_name+first_name AS 姓名 FROM employees;没有报错但姓名一下全是0 Java中的 + ...
- strtotime中的一些坑
monday: 获取到的时间戳是下一个周一,如果当天是周一则获取到当天. last monday:获取上一个周一时间戳,如果当天是周一获取到的也是上一个周一时间戳. next monday:获取下一个 ...
- AcWing 差分一维加二维
一维 #include<bits/stdc++.h> using namespace std ; ; int n,m; int a[N],b[N]; //a为前缀和,b为差分 差分和前缀和 ...
- 每天进步一点点------下载Microblaze程序到Flash
第一步 生成下载文件(bit文件) 选择之前的工作目录,打开SDK.点击Program FPGA图标. 将bootloop项改为Hello_World.elf.点击Program.此时可以不用连接下载 ...
- chrome firefox浏览器屏蔽百度热搜
我是原文 操作 点击拦截元素,然后选择页面元素,添加
- c#显示行号设置方法
工具→选项→文本编辑器→c#→常规→显示→勾选行号 反之取消即可.