今天本人要做一个点击弹出的功能，因为这个功能是最后做的，所以写的时候很纠结， 因为本人小菜一枚， 开始尝试用 position：relative；来做一试不行呀 ，因为用这个来做的话 会打乱原有的布局， 然后我就又尝试 absolute 来做，其实用绝对定位是正确的 可是我当时犯蒙，把弹出框放在html最后面 然后定位用了 top 还有left，结果absulute虽然不会影响布局 可是位置是死的，好了 不屁话了 直接上正确的方式。

　　对了 最后我被气的好考虑过用js来做  先获取一个可以随着浏览器移动而移动的div的位置  然后获取他的x，y  然后 弹出div的位置用获取到的x，y。这虽然没有试，但是我估计也是可以的 可能就是麻烦点。

正确的方式应该是：html页面

css页面：

这样写就能保证弹出框的div不会干扰到其他的div  位置又不是死的 不会因为浏览器的分辨率而发生位置变化。 但是具体深层次的原因 还是不太懂

欢迎大神留言不吝赐教！

关于div弹出层的实际应用心得的更多相关文章

  1. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  2. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  3. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  4. 一个简单的div弹出层的小例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  6. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  7. DIV弹出和关闭新DIV

    代码用HTML+JS实现: 代码(用HTML+JS实现): <!doctype html> <html lang="UTF-8"> <head> ...

  8. 【Bootstrap3.0建站笔记二】button可下拉弹出层

    1.button可下拉弹出层: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hpbmFwbGFu/font/5a6L5L2T/fontsize/400 ...

  9. asp.net弹出层实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

随机推荐

  1. python学习之——django环境搭建

    Django是一个基于MVC构造的框架,用于web开发,主要目的是简便.快速的开发数据库驱动的网站. 前提:已经安装python 搭建步骤: 1.https://www.djangoproject.c ...

  2. Nginx-->基础-->安装-->001:安装总结

    root@ubuntu:/data/src/nginx# ./configure --help --help print this message --prefix=PATH set installa ...

  3. ABAP POPUP函数

    POPUP_TO_CONFIRM_LOSS_OF_DATA 弹出一个对话框告知用户有可能丢失数据,询问是否操作继续.POPUP_TO_CONFIRM_STEP 弹出一个对话框询问用户是否操作继续. P ...

  4. Codeforces 586D. Phillip and Trains 搜索

    D. Phillip and Trains time limit per test: 1 second memory limit per test :256 megabytes input: stan ...

  5. 个人理解的javascript作用域链与闭包

    闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: function f1(){ n=100; function f2(){ alert(n); } retu ...

  6. C++面试中string类的一种正确简明的写法

    本文首发于酷壳网 http://coolshell.cn/articles/10478.html 先说说程序员(应届生)面试的一般过程,一轮面试(面对一到两个面试官)一般是四.五十分钟,面试官会问两三 ...

  7. 2016年iOS技术圈回顾

    2016年同2015年一样,在我还没有做好心理准备的时候,一晃神就到了年底.年关将近,不知诸君心情如何,年初的规划实现了多少,来年的计划又是否已有了眉目.年过三十的Peak君感觉年关是越来越难过了,越 ...

  8. RTMP协议中文翻译(首发)（转）

    Adobe公司的实时消息传输协议 摘要 此备忘录描述了 Adobe公司的实时消息传输协议(RTMP),此协议从属于应用层,被设计用来在适合的传输协议(如TCP)上复用和打包多媒体传输流(如音频.视频和 ...

  9. Linux的学习之路

    linux的安装配置.常用命令: 基本上学习任务: 1.在VMware(9)虚拟机上安装Linux操作系统(安装CentOs操作系统) 2.了解Linux操作系统 3.通过XShell工具操作Linu ...

  10. Backbone.js

    Backbone.js是一套JavaScript框架與RESTful JSON的應用程式介面.也是一套大致上符合MVC架構的編程範型.Backbone.js以輕量為特色,只需依賴一套Javascrip ...