博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
absolute系列之基本功能
阅读量:5283 次
发布时间:2019-06-14

本文共 696 字,大约阅读时间需要 2 分钟。

首先,我重新学习一下CSS 2.1规范中

其中原文是这样子的:In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

大概意思是:脱离文档流(normal flow)(对后面的同级元素(later siblings)没有影响);相对于包含块(containing block)进行分配位置。

对其作用基本了解后,就开始程序猿的生活了。。。

 想必大家对 relative+absolute+top... 的“猿猴行为”再也熟悉不过了。那木,鄙“猿”对此整理下:

  1. 元素隐藏:
    position:absolute; top: -1000px;

    无需relative帮忙(其实,默认相对body元素定位)

  2. 垂直居中:
    .container{position:relative; ...}.item{position:absolute; top:50%; margin-top:-10px; height:20px; width...}

    margin-top = -1/2(height)

  3. 对下拉列表,菜单等动态效果进行定位显示,同时又达到不影响 later siblings 的效果。

转载于:https://www.cnblogs.com/zhangshiliang/p/6716069.html

你可能感兴趣的文章
在Android中Intent的概念及应用(二)——Intent过滤器相关选项
查看>>
第十六章 多态性(一)
查看>>
INSERT IGNORE INTO / REPLACE INTO
查看>>
Python数据类型-布尔/数字/字符串/列表/元组/字典/集合
查看>>
【刷题】SPOJ 705 SUBST1 - New Distinct Substrings
查看>>
IEEE 754浮点数表示标准
查看>>
declare 结构用来设定一段代码的执行指令
查看>>
图解算法读书笔记
查看>>
调试学习笔记
查看>>
解开lambda最强作用的神秘面纱
查看>>
Java基础:Object类中的equals与hashCode方法
查看>>
C#拦截Http请求
查看>>
图片下载器
查看>>
找不到docker.socket解决方法
查看>>
Activity生命周期
查看>>
HTML中head头结构
查看>>
sql server和mysql中分别实现分页功能
查看>>
jQuery CircleCounter的环形倒计时效果
查看>>
kafka server管理
查看>>
系统设计与分析(六)
查看>>