一、子绝父相

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-子绝父相的更多相关文章

  1. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  2. css负边距之详解(子绝父相)

    来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以 ...

  3. CSS中的父相子绝布局

    主要应用场景,就是我想要块的布局根据父级来定位,而不是根据页面. 例如,下面的例子中,我用两个半圆拼成一个正圆,思路是用一个父级标签把两个子标签包起来,父标签是一个正圆,然后子标签各占一半,先化成两个 ...

  4. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  5. Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...

  6. sql server 子找父和父找子

    父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...

  7. ylb：子查询（嵌套子查询）和子查询（相关子查询）

    ylbtech-SQL Server:SQL Server-子查询(嵌套子查询)和子查询(相关子查询) SQL Server 子查询(嵌套子查询)和子查询(相关子查询). 1,ylb:1,子查询(嵌套 ...

  8. vue 实现子向父传值

    父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...

  9. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

随机推荐

  1. 图的最短路径算法-- Floyd算法

    Floyd算法求的是图的任意两点之间的最短距离 下面是Floyd算法的代码实现模板: ; ; // maxv为最大顶点数 int n, m; // n 为顶点数,m为边数 int dis[maxv][ ...

  2. 【资源分享】Gmod日志记录脚本

    *----------------------------------------------[下载区]----------------------------------------------* ...

  3. hrtf virtual surround matlab实现

    将5.1 ch的数据经过hrtf处理,然后downmix到2ch,使得2ch的数据有virtual surround的效果. function output = hrir_process(input) ...

  4. [Codechef TASTR] Level of Difference - 后缀数组,容斥原理

    [Codechef TASTR] Level of Difference Description 给定两个字符串,求恰好在一个字符串中出现过的本质不同的子串数量. Solution 设 \(U(S)\ ...

  5. 基于Linq表达式做的一个简单的表达式生成器

    using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; ...

  6. spring（三）：BeanDefiniton

  7. Java-POJ1013-Counterfeit Dollar

    在13枚硬币中找出fake的那一个 输入:三次天平称量结果 package poj.ProblemSet; import java.util.Scanner; /* 我怎么觉得是贪心算法呢? 起初对所 ...

  8. nginx配置访问黑名单-2

    在Nginx服务器上屏蔽IP 1.查找要屏蔽的ip awk '{print $1}' nginx.access.log |sort |uniq -c|sort -n nginx.access.log ...

  9. MySQL学习（六）change-buffer

    文章部分总结描述来自参考文章,属于半原创. 概述     文章将会介绍 change buffer 相关的知识点 查看 MySQL InnoDB 状态的命令 SHOW ENGINE INNODB ST ...

  10. Codeforces Round #619 (Div. 2)C（构造，容斥）

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; int main(){ ios::syn ...