<!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. heapq模块

    该模块提供了堆排序算法的实现.堆是二叉树,最大堆中父节点大于或等于两个子节点,最小堆父节点小于或等于两个子节点. 创建堆 heapq有两种方式创建堆, 一种是使用一个空列表,然后使用heapq.hea ...

  2. Scala_Load csv data to hive via spark2.1

    code: package com.liupu import org.apache.spark.{ SparkContext, SparkConf } import org.apache.spark. ...

  3. 转 oracle数据仓库部署注意事项（OLAP）

    https://blog.csdn.net/laven54/article/details/9840365 最近数据库升级到11G之后,出现一些问题,慢慢的开始发现一些需要总结的东西,每次心里都在想: ...

  4. (转)linux内核参数注释与优化

    linux内核参数注释与优化 原文:http://blog.51cto.com/yangrong/1321594 http://oldboy.blog.51.cto.com/2561410/13364 ...

  5. PHP面试题基础问题

    1.对于大流量的网站,您采用什么样的方法来解决访问量问题? 首先,确认服务器硬件是否足够支持当前的流量 其次,优化数据库访问. 第三,禁止外部的盗链. 第四,控制大文件的下载. 第五,使用不同主机分流 ...

  6. android 开发-Toast控件的实现

    Toast吐司: Toast内容简单,不做过多介绍,Toast支持自带简单吐司,自定义吐司.内容简单可见代码,详见API.A toast provides simple feedback about ...

  7. CSS里的 no-repeat

    简单来说,CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平 ...

  8. 16.Ubuntu LTS 16.04安装搜狗输入法全过程记录（纯新手）

    这是我第四次打算转到Ubuntu上了,应该不会像以前那样装个系统就拜拜了.打算先把C和Vim重新学起来,数据结构那本书看完写完,第二步是学python和算法导论,暂定如此. 昨天晚上系统装完以后想着要 ...

  9. Maven下 SpringMvn+thymeleaf 搭建

    1.首先新建一个项目 2.根据以下选项,点击下一步 3.随便输入 4.配置maven的路径 5.点击完成 6.等待所有maven的库文件下载完成后配置pom.xml依赖 <dependency& ...

  10. 【干货】Html与CSS入门学习笔记12-14【完】

    十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...