zoukankan      html  css  js  c++  java
  • CSS-定位

    • 相对
    • 绝对
    • 固定

    一: 相对定位

    相对定位:相对于自己原来的位置定位

    特性:

    1.不脱标

    2.形影分离

    3.老家留坑

    所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

    用途:

    1.微调元素位置

    2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。

    参考点:

    自己原来的位置做参考点。

    二: 绝对定位

    特性:

    1.脱标 2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。

    参考点(重点):

    一、单独一个绝对定位的盒子

    1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
    2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

    二、以父辈盒子作为参考点

    1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。

    2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点

    3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

    注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。

    还要注意,绝对定位的盒子无视父辈的padding

    让绝对定位的盒子居中

    left:50%;
    margin-left:- 宽度的一半

    三: 固定对位

    固定当前的元素不会随着页面滚动而滚动

    特性: 

    1.脱标 2.遮盖,提升层级 3.固定不变

    参考点:

    设置固定定位,用top描述。那么是以浏览器的左上角为参考点
    如果用bottom描述,那么是以浏览器的左下角为参考点

    作用: 1.返回顶部栏 2.固定导航栏 3.小广告

    四: z-index

    这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。

    • z-index 值表示谁压着谁,数值大的压盖住数值小的,
    • 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
    • z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
    • 从父现象:父亲怂了,儿子再牛逼也没用
  • 相关阅读:
    trackr: An AngularJS app with a Java 8 backend – Part III
    trackr: An AngularJS app with a Java 8 backend – Part II
    21. Wireless tools (无线工具 5个)
    20. Web proxies (网页代理 4个)
    19. Rootkit detectors (隐形工具包检测器 5个)
    18. Fuzzers (模糊测试器 4个)
    16. Antimalware (反病毒 3个)
    17. Debuggers (调试器 5个)
    15. Password auditing (密码审核 12个)
    14. Encryption tools (加密工具 8个)
  • 原文地址:https://www.cnblogs.com/wc89/p/11192666.html
Copyright © 2011-2022 走看看