<!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. [转]深入探讨C语言中局部变量与全局变量的作用域与存储类别

    C语言中局部变量和全局变量变量的作用域与存储类别(auto,static,extern,register) 1.局部变量和全局变量在讨论函数的形参变量时曾经提到,形参变量只在被调用期间才分配内存单元, ...

  2. CollabNet Subversion Edge 迁移的方法

    服务器迁移或重新搭建时,数据迁移方法,安装配置在https://www.cnblogs.com/pinpin/p/9889362.html种 这里只是迁移用户和数据,做个备注而且,比较简单所以不截图了 ...

  3. AJAX下拉框联动

    function getProvince() { var ProName = $("#dvProv").val(); LoadProvince(ProName); } functi ...

  4. easyui databox获取当前时间

    class=easyui-datebox $(document).ready(function() {             $("#thedate").datebox(&quo ...

  5. 《从0到1学习Flink》—— 介绍Flink中的Stream Windows

    前言 目前有许多数据分析的场景从批处理到流处理的演变, 虽然可以将批处理作为流处理的特殊情况来处理,但是分析无穷集的流数据通常需要思维方式的转变并且具有其自己的术语(例如,"windowin ...

  6. Docker创建Centos踩出来的坑

    屁话不多说,先来一遍正常的流程 1.下载centos镜像 # docker pull centos 2.运行容器,修改镜像 2.1 运行 # docker run -itd --name centos ...

  7. SpringBoot | 第十八章：web应用开发之WebJars使用

    前言 前面一章节我们主要讲解了关于文件上传的两种方式.本章节继续web开发的相关知识点.通常对于web开发而言,像js.css.images等静态资源版本管理是比较混乱的,比如Jquery.Boots ...

  8. jQuery 方法 属性

    Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.j ...

  9. 说说C#中的enum吧

    enum,就是枚举类型,它是struct,int,single,double一样,都属于值类型,从ValueType类型中派生,存储在栈中.它在被创建时,不需要分配内在空间,所以对程序的性能是有好处的 ...

  10. ORACLE比较两个数据库的表结构

    create table ESPACE_TABLE( TABLE_NAME VARCHAR2(100) not null) create table ESPACE_COLUMN( TABLE_NAME ...