<!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. py---------socketserver

    同时两个客户端连接, server 不能有input server端根据client端的要求去执行固定的代码 server.py #-*- coding:utf-8 -*- import time i ...

  2. OSI七层和TCP/IP四层的关系、TCP与UDP、HTTP、Socket

    HTTP(应用层协议):超文本传输协议,HTTP协议是建立在TCP协议之上的一种应用. HTTP协议详细解释 2Http详解 TCP(面向连接的传输层协议):transmission control ...

  3. SpringBoot | 第十九章：web应用开发之WebSocket

    前言 web开发也讲解了三章了,这章节开始讲解关于与前端通信相关知识.实现一个在线聊天室类似的功能或者后端推送消息到前端,在没有WebSocket时,读大学那伙还有接触过DWR(Direct Web ...

  4. HTML <pre> 标签

    需求 错落有致的规则说明 ps.我真的是一个后端开发... pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体.

  5. Java开发笔记（九十八）利用Callable启动线程

    前面介绍了如何利用Runnable接口构建线程任务,该方式确实方便了线程代码的复用与共享,然而Runnable不像公共方法那样有返回值,也就无法将线程代码的处理结果传给外部,造成外部既不知晓该线程是否 ...

  6. iOS开发ReactiveCocoa学习笔记(二)

    RAC 中常见的宏: 使用宏定义要单独导入 #import <RACEXTScope.h> 一. RAC(TARGET, [KEYPATH, [NIL_VALUE]]):用于给某个对象的某 ...

  7. JSPt的Base标签

    <base href="${pageContext.request.contextPath}/"/> 注意:base标签得到的内容是: /projectName/ 这种 ...

  8. *.rpm is not signed解决

    1.# yum install qemu*报错如下:Package qemu-kvm-tools-0.12.1.2-2.113.el6.x86_64.rpm is not signed2.解决# vi ...

  9. Hibernate数据库的操作

    参考网址: https://www.cnblogs.com/jack1995/p/6952704.html 1.最简单的查询 List<Special> specials = (List& ...

  10. 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统：11.定制化Log输出

    欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 前言 在<迷你微信>服务器中,我们用了Log4J来进行输出,这可以在我们程序出现异常的时候找到错误发生时 ...