<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div style="border: 1px solid red;width: 500px;height: 280px;margin: 0 auto;position: relative">

     <div style="background-color: black;width: 40px;height: 40px;position: absolute;right: 0;bottom: 0;color: white">

         <div style="line-height: 40px; text-align: center">哈哈</div>

     </div>

 </div>

 <div style="border: 1px solid red;width: 500px;height: 280px;margin: 0 auto;position: relative">

     <div style="background-color: black;width: 40px;height: 40px;position: absolute;left: 0;top: 0;color: white">

         <div style="line-height: 40px; text-align: center">哈哈</div>

     </div>

 </div>

 </body>

 </html>

效果如下图

position的 relative+absolute实现固定标签在窗口的某个位置的更多相关文章

  1. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  2. CSS 浅析position：relative/absolute定位方式

    ## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...

  3. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  4. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  5. HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...

  6. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  7. (转)Position定位：relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  8. 2016/2/19 position： fixed absolute relative z-index float 半透明效果

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口.      显示效果  无论滚动条怎么移动  都固定在显示页面的一个位置不动 二.position:a ...

  9. CSS里面position：relative与position：absolute 区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

随机推荐

  1. Django 02 url路由配置及渲染方式

    Django 02 url路由配置及渲染方式 一.URL #URL #(Uniform Resoure Locator) 统一资源定位符:对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是 ...

  2. POJ 3537 Crosses and Crosses(sg博弈）

    题目:在1*n 的棋盘里面,A和B都在里面画叉 , 如果谁可以画了一个叉后,可以连成3个叉,那谁胜利 : 分析: 首先考虑如果我在玩游戏,我最希望对手可以画出-x-x or  -xx-   ,  这种 ...

  3. spark_运行spark-shell报错_javax.jdo.JDOFatalDataStoreException: Unable to open a test connection to the given database.

    error: # ./spark-shell Caused by: javax.jdo.JDOFatalDataStoreException: Unable to open a test connec ...

  4. 剑指Offer丑数问题

    这是剑指第一次卡死我的题……记录一下 首先看题目: 把只包含质因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质因子7. 习惯上我们把1当做是第一个丑数 ...

  5. 【心得】asp.net 异常：正在中止线程 引发的问题

    asp.net做的一个同步程序,同步的方法是通过JQuery的Ajax调用,同步过程所需要的时间大概有几个小时吧. 当在本机运行的时候,无论是debug模式还是release模式,都能正常运行. 发布 ...

  6. 七、SSR（服务端渲染）

    使用框架的问题 下载Vue.js 执行Vue.js 生成HTML页面(首屏显示,依赖于vue.js的加载) 以前没有前端框架时,用jsp/php在服务器端进行数据的填充,发送给客户端就是已经填充好的数 ...

  7. 《Python高效开发实战》实战演练——基本视图3

    在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...

  8. Android 常用RGB值及名称

    Android   常用RGB值及名称 颜  色 RGB值 英文名 中文名 #FFB6C1 LightPink 浅粉红 #FFC0CB Pink 粉红 #DC143C Crimson 深红/猩红 #F ...

  9. 卸载VS2013 2015

    我有两个VS,特别讨厌,每当使用window程序删除时候,就出现 停止工作! 然后从知乎上发现了这个 https://github.com/Microsoft/VisualStudioUninstal ...

  10. X86/X64 函数调用约定

    C 语言有 __cdecl.__stdcall.__fastcall.naked.__pascal. C++ 语言有 __cdecl.__stdcall.__fastcall.naked.__pasc ...