今天本人要做一个点击弹出的功能，因为这个功能是最后做的，所以写的时候很纠结， 因为本人小菜一枚， 开始尝试用 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. 计算软键盘的高度然后确定自定义的View的具体位置

    singleTouchView.getViewTreeObserver().addOnGlobalLayoutListener( new ViewTreeObserver.OnGlobalLayout ...

  2. php开发环境搭建——laravel框架，apache服务器，git版本控制

    本文主要阐述做项目前的开发环境安装——后端为php,前端采用grunt进行自动化构建.具体介绍了windows平台下采用apache运行php的环境搭建,以及git工具安装.写得有点粗糙,但过程完整, ...

  3. CodeSmith Merge策略--小白教程

        为了让 自动产生的代码 和 程序员手写的代码 互不干涉, 提出了Merge策略, 包括以下三种 InsertRegion: 只插入(覆盖)到指定 #region区域 InsertClass: ...

  4. Oracle中三种循环(For、While、Loop)

    1.ORACLE中的GOTO用法 DECLARE x number; BEGIN x := 9; <<repeat_loop>> --循环点 x := x - 1; DBMS_ ...

  5. double四舍五入，double四舍五入并转成string

    import java.math.BigDecimal; /** * 处理一些数据类型的方法的java类 * @author ljb * */public class NumberTools { /* ...

  6. css 字间距、CSS字体间距、css 字符间距设置

    1.text-indent设置抬头距离css缩进 2.letter-spacing来设置字与字间距_字符间距离,字体间距css样式

  7. 简单一键CENTOS6 安装PPTP VPN方法记录

    申明:我们使用PPTP VPN仅仅只能用在查阅资料等正规渠道,不要用在不良用途上.方法收集于网上,这里我用在搬瓦工VPS(VPS方案直达),采用的是CENTOS6 64位系统.我们需要预先将VPS服务 ...

  8. 影响google PageRank的因素

    1 与pr高的网站做链接: 2 内容质量高的网站链接 3 加入搜索引擎分类目录 4 加入免费开源目录 5 你的链接出现在流量大.知名度高.频繁更新的重要网站上 6 google对PDF格式的文件比较看 ...

  9. oracle数据库升级记(记一次10.2.0.3版本升级到11.2.0.1版本的过程)

    操作系统:windows xp 已有数据库版本:10.2.0.3 升级目标版本:11.2.0.1 步骤大纲: 在源操作系统(安装有10.2.0.3数据库的操作系统)上安装11.2.0.1数据库软件,然 ...

  10. [PHP] Phalcon应用升级PHP7记录

    升级主要有 php7, phalcon, extension 这三个方面工作. [php7] 我选择从 git 中源码包安装,下面是主要安装步骤: git clone -b php- https:// ...