一、子绝父相

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. laravel多条件模糊查询

    1.运用cmd在项目根目录下创建路由组 php artisan make:controller queryController --resource 1.1数据库信息(student) CREATE ...

  2. AE 打开Shp文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. spring security和java web token整合

    思路: spring security 1.用户输入用户名密码. 2.验证:从库中(可以是内存.数据库等)查询该用户的密码.角色,验证用户名和密码是否正确.如果正确,则将填充Authenticatio ...

  4. 题解 洛谷 P4145 【上帝造题的七分钟2 / 花神游历各国】

    题目 上帝造题的七分钟2 / 花神游历各国 题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. ...

  5. 移动端安卓IOS对接H5项目遇到的坑

    最近做一个H5项目 退出的时候需要调用原生的弹框退出, 之前以为很简单,直接ajax调用后端退出接口即可.后来发现数据拿不到,因为状态用的是cookie存储, 后来想到ajax 传参数请求,后来还是拿 ...

  6. kmp算法散记

    1. https://blog.csdn.net/abcjennifer/article/details/5794547 #include<bits/stdc++.h> using nam ...

  7. vue项目单页

    <template> <div> <div v-if="type === 'A'">A</div> <div v-else-i ...

  8. 题解【洛谷P5483】[JLOI2011]小A的烦恼

    我们可以灵活运用\(C++\)的语法来解决此题. 解释一下代码中会出现的语法: \(string::iterator\ it\)表示定义了一个\(string\)类型的迭代器\(it\),\(^*it ...

  9. BZOJ1015[JSOI2008]星球大战starwar题解报告

    题目链接 考虑正序去除点去掉其所有连边十分复杂,可以倒序离线处理,每次新建一个点,连接其连边,用并查集统计联通块的个数. 附代码 #include<iostream> #include&l ...

  10. AAC DRC

    DRC feature 在AAC decoder是optional.DRC info是在编码在fill element. Program reference level是进行DRC的一个参考值.是原始 ...