补充：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. 转：Git: git stash 用法小结

    一.应用场景 综合下网上的介绍和资料, git stash (git储藏)可用于以下情形: 发现有一个类是多余的,想删掉它又担心以后需要查看它的代码,想保存它但又不想增加一个脏的提交.这时就可以考虑  ...

  2. 如何将git本地创建的项目推送到github仓库

    除了集中式的版本控制系统CVS和SVN外,还有目前世界上最先进的分布式版本控制系统Git,它的创始人是创建了linux的大神 - linus.GitHub网站与2008年开始服役,为开源项目免费提供G ...

  3. 微网站|手机端html弹窗、弹层、提示框、加载条

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  4. C++技术沙龙报名开始啦！

    沙龙主题:C++甜点关键字:C++之美,黑科技,神奇和魔力内容:三场主题演讲和一场开放性话题讨论时间:2015年5月16日下午2:00-6:00地点:珠海金山办公软件1楼VIP厅,珠海市吉大景山路莲山 ...

  5. python（51）：Python vars() 函数

    Python vars() 函数  Python 内置函数 描述 vars() 函数返回对象object的属性和属性值的字典对象. 语法 vars() 函数语法: vars([object]) 参数 ...

  6. iOS开发如何学习前端(2)

    iOS开发如何学习前端(2) 上一篇成果如下. 实现的效果如下. 实现了一个横放的<ul>,也既iOS中的UITableView. 实现了当鼠标移动到列表中的某一个<li>,也 ...

  7. (转)C++11里的智能指针

    1. std::auto_ptr有些违背c++编程思想. 已经被"不建议使用了".2. 下文转自:http://blog.csdn.net/lanergaming/article/ ...

  8. sql2008修改数据库文件名称

    例如我们有数据库a,需修改成b,包括文件名称也修改 1.备份数据a 选择数据库->右键->任务->备份,备份出a.bak 2.右键->任务->还原->数据库,跳出“ ...

  9. JMeter测试工具中的参数化使用[函数助手]

    下面是我使用JMeter测试工具对某项目中的一个http接口进行测试时的配置参数,使用到了JMeter的随机函数: 在发送POST请求时,需要发送json格式的数据,其中使用到JMeter的" ...

  10. 有了#ifdef 为什么还需要#if defined

    有了#ifdef 为什么还需要#if  defined ? #include <stdio.h> #define A #define B void test(int a,int b) { ...