今天本人要做一个点击弹出的功能，因为这个功能是最后做的，所以写的时候很纠结， 因为本人小菜一枚， 开始尝试用 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. 在ubuntu16编译安装nginx-1.10.2（full）完全自带组件

    第一步:先安装全部用到的包 apt install gcc libpcre++-dev libssl-dev make \ libxml2-dev libxslt-dev libgd-dev libg ...

  2. 用VLC Media Player搭建简单的流媒体服务器

    VLC可以作为播放器使用,也可以搭建服务器. 在经历了Helix Server和Darwin Streaming Server+Perl的失败之后,终于找到了一个搭建流媒体简单好用的方法. 这个网址中 ...

  3. 记一次PHP7+opcache+zmq出现SIGSEGV 问题的查找(一次不成功的bug查找)

    Title:  记一次PHP7+opcache+zmq出现SEGSEGV问题的查找(一次不成功的bug查找) bug来历自述:线上代码PHP环境是5.2,为了提升性能(逼格),于是升级为PHP7并使用 ...

  4. tnsnames.ora配置注意（连接新的数据库）

    文件地址D:\app\think\product\11.2.0\instantclient_11_2\network\admin\tnsnames.ora# tnsnames.ora Network ...

  5. c# htmtToPDF

    http://www.cnblogs.com/shanyou/archive/2012/09/07/2676026.html

  6. Scala学习笔记一

    首先是安装Scala 下载Scala进行安装 http://www.scala-lang.org/ 安装好scala后,为scala配置系统环境参数 新建环境变量SCALA_HOME,值为scala安 ...

  7. Android 图片添加水印图片或者文字

    给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  8. 解决Nginx不支持pathinfo的问题

    server { listen 80; server_name www.zq27.cc zq27.cc; root /data/wwwroot/www.zq27.cc/; access_log off ...

  9. struts2中如何使用主题theme

    一.什么是主题? 主题就是一种风格化标签,能够让所有UI标签能够产生同样的视觉效果而归集到一起的一组模板,即风格相近的模板被打包为一个主题 二.struts2提供的主题有哪些呢?struts2中如何修 ...

  10. CSV的导入导出

    using System; using System.Data; using System.IO; namespace COMMON { public class CSVhelperClass { / ...