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(" ...
随机推荐
- ANDROID开发之问题积累及解决方案（三）
1.dexDebug ExecException finished with non-zero exit value 2需要在gradle中配置下面的代码,原因是引用了多个libraries文件 de ...
- OpenCV: “vector”: 未声明的标识符和Vector不是模板
漏写using namespace std: 会出现此错误“vector”: 未声明的标识符或者是将“vector”写成‘Vector’会出现Vector不是模板的错误:改正即可
- OpenTLD相关资料
这是一位来自奥地利的博士生的博客 他的介绍如下: I am a PhD student at the Safety and Security Department of the Austrian In ...
- 题解【AcWing271】杨老师的照相排列
题面 经典的线性 \(\text{DP}\) . 设 \(dp_{a,b,c,d,e}\) 表示第 \(1\) 排有 \(a\) 个人,第 \(2\) 排有 \(b\) 个人, 第 \(3\) 排有 ...
- 2019牛客多校第五场 F maximum clique 1 状压dp+最大独立集
maximum clique 1 题意 给出一个集合s,求每个子集的最大独立集的权值和(权值是独立集的点个数) 分析 n比较小,一股浓浓的暴力枚举每一个子集的感觉,但是暴力枚举模拟肯定会T,那么想一想 ...
- [Codechef TASTR] Level of Difference - 后缀数组,容斥原理
[Codechef TASTR] Level of Difference Description 给定两个字符串,求恰好在一个字符串中出现过的本质不同的子串数量. Solution 设 \(U(S)\ ...
- PP: Composite visual mapping for time series visualization
However: The conventional visual mapping maps each data attribute onto a single visual channel Purpo ...
- java Map 迭代key,value 最简洁的方法
import java.util.HashMap; import java.util.Map; public class EntrySets { public static void main(Str ...
- 第三十六篇 入门机器学习——Jupyter Notebook中的魔法命令
No.1.魔法命令的基本形式是:%命令 No.2.运行脚本文件的命令:%run %run 脚本文件的地址 %run C:\Users\Jie\Desktop\hello.py # 脚本一旦 ...
- 洛谷 P5569 [SDOI2008]石子合并 GarsiaWachs算法
石子合并终极通用版 #include<bits/stdc++.h> using namespace std ; ]; int n,t,ans; void combine(int k) { ...