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(" ...
随机推荐
- 修改json数据中key(键值)
//方法一:修改JSONObject的键 public static JSONObject changeJsonObj(JSONObject jsonObj,Map<String, String ...
- AcWing 1027. 方格取数
#include<iostream> using namespace std ; ; *N][N][N]; int w[N][N]; int n; int main() { cin> ...
- c语言修炼之一
1.C项目要高内聚(模块功能必须明确,一个模块完成一个功能).低耦合(接口尽可能简单,减少各模块间的联系). 2.register类型不能为模块间的全局变量.模块内的全局变量.局部static变量.( ...
- session的到底是做什么的？
原文地址:https://blog.csdn.net/h19910518/article/details/79348051 前言: 今天就来彻底的学一些session是个啥东西,我罗列了几个需要知道的 ...
- matplotlib 做图通过弹出窗口展示 spyder
tools =>preferences=>Ipython console=>Graphics Graphics backend 中Backend 由Inline改为 Automati ...
- 剑指offer 面试题. 数据流中的中位数
题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值.我们 ...
- Element-ui组件库Table表格导出Excel表格
安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...
- scw——03错误，swagger开启错误
错误: 代码: @Value("${swagger2.enable:false}") private boolean enable = false; 原因:没有开启swagger的 ...
- 将java字节自动转为"B", "KB", "MB", "GB", "TB"等
//字节转换 public static String readableFileSize(long size) { if (size <= 0) return "0"; fi ...
- python selenium设计模式POM
POM模式是什么 页面对象模型(POM)是一种设计模式,用来管理维护一组web元素集的对象库 在POM模式下,应用程序的每一个页面都有一个对的page class 每一个page class维护着该w ...