补充：ul 应该设置下 list-style: none;

题外话：看了张鑫旭的视频，这家伙把简单的css玩出了新花样，绝对大神级的存在。膜拜下先~

float的作用前面一章已经说过了，但没考虑过的是 position:absolute 作用与float极其类似。

二者都是将自身浮空（垂直于屏幕） -- 其实是将其容器高度塌陷。

不同点在于：float会改变位置，但 position:absolute 则会保存其原有位置！！！

利用 position:absolute 的这个特性，我们可以更好的实现一个搜索框的功能：

代码如下，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>POSITION:ABSOLUTE vs FLOAT</title>

    <style>

        ul,

        li,

        input,

        button {

            padding: 0;

            margin: 0;

        }

        .box,

        section {

            width: 254px;

            height: 32px;

            border: 1px solid #e6e8e9;

            box-sizing: content-box;

            overflow: hidden;

        }

        input {

            width: 200px;

            height: 30px;

            border: 1px solid #009527;

            box-sizing: content-box;

            /*padding-left: 5px;*/

            text-indent: 5px;

            text-overflow: ellipsis;

        }

        button {

            width: 50px;

            height: 30px;

            border: 1px solid #009527;

            box-sizing: content-box;

        }

        ul{

            color: #333;

            border: 1px solid #999;

            margin-top: -1px;

            margin-left: 1px;

            /*transition: all 1.25s;*/

        }

        li{

            width: 252px;

            background-color: #d5d7d9;

            text-indent: 10px;

        }

    </style>

</head>

<body>

    <h3>使用absolute！！！</h3>

    <div class="box">

        <section>

            <input type="text" name="key" placeholder="Anything you wanna know..."><button type="button">Go!</button>

        </section>

        <div>

            <ul>

                <li>AAA</li>

                <li>BBB</li>

                <li>CCC</li>

                <li>DDD</li>

                <li>EEE</li>

            </ul>

        </div>

    </div>

</body>

<script>

    var count=0;

    var btn = document.getElementsByTagName('button')[0];

    btn.onclick = function () {

        count++;

        var ul = document.getElementsByTagName('ul')[0];

        if(count%2)

            ul.style.position = 'absolute';

        else

            ul.style.position = 'static';

    }

</script>

</html>

其效果如下：

CSS之float vs position:absolute的更多相关文章

  1. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  2. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  3. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  4. css的float和position属性

    (1)float的简单用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  6. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  7. 解决CSS的position:absolute中left效果

    有时候css中设置了position:absolute,left:100px,但是如果我们不想要这个left怎么办呢,当然你直接删除就可以,但是如果是框架的css,你直接删除就有问题了,这时候该怎么办 ...

  8. 【CSS】 布局之浮动float和绝对定位absolute的选择

    浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位 ...

  9. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

随机推荐

  1. HTML5学习笔记（二十三）：DOM应用之动态加载脚本

    同步加载和执行JS的情况 在HTML页面的</body>表情之前添加的所有<script>标签,无论是直接嵌入JS代码还是引入外部js代码都是同步执行的,这里的同步执行指的是在 ...

  2. 源码分析HotSpot GC过程(三)：TenuredGeneration的GC过程

    老年代TenuredGeneration所使用的垃圾回收算法是标记-压缩-清理算法.在回收阶段,将标记对象越过堆的空闲区移动到堆的另一端,所有被移动的对象的引用也会被更新指向新的位置.看起来像是把杂陈 ...

  3. [Windows Azure] Building worker role A (email scheduler) for the Windows Azure Email Service application - 4 of 5.

    Building worker role A (email scheduler) for the Windows Azure Email Service application - 4 of 5. T ...

  4. 每日英语：A Chinese Father’s Most Important Job

    When it comes to parenting, Chinese fathers say the most important role they play is that of the fam ...

  5. Asp.Net微信支付接口之jsApiPay教程

      1.微信支付JsApiPay只能在微信浏览器中使用 2.必须先申请微信支付功能 3.设置域名 4.设置支付授权目录 一定要精确到最后一级目录 5.获取APPID和AppSecret AppSecr ...

  6. BOE系统与BW系统间的单点登录（注：这里先简单写一下，改天有时间再进行详细的描述）

    1,在BOE系统内进行配置,将BW系统内的用户信息导入BOE 2,在BOE系统内定义这些导入用户对BOE对象有哪些权限 3,用户使用BW系统的用户名密码登录BOE系统:BOE将登录凭证转发给BW系统让 ...

  7. CentOS 7修改管理员密码

    之前安装CentOS 7的时候随便输入了一个密码,现在使用需要root权限,只能重置密码了.下面是处理方法:(进入单用户模式修改root密码为例) 在启动菜单中,按e编辑所选启动项 一页内容,感觉挺陌 ...

  8. git stash 暂存恢复和文件误删恢复

    git commit提交文件,服务器返回本地文件有修改. 1.git stash :暂存本地代码 2.git pull origin develop : 获取远程分支代码 3.git stash po ...

  9. mysql 锁表操作流程

  10. RabbitMQ文档翻译——Work queues

    原文链接:https://www.rabbitmq.com/tutorials/tutorial-two-java.html Work Queues (using the Java Client) I ...