<!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. HIVE获取表的大小和修改日期

    ### 获取表的大小 hdfs dfs -du /user/hive/warehouse/database_name.db/ > 360_du ### 获取表的修改日期 hdfs dfs -ls ...

  2. 【ACM】拦截导弹 - 0-1背包问题

    拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 某国为了防御敌国的导弹袭击,发展中一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...

  3. Win10家庭版打不开gpedit.msc

    本文来源 : https://www.ithome.com/html/win10/324926.htm win10家庭版是不自带这个功能的 首先我们打开记事本,并输入以下内容(注意空格): @echo ...

  4. java环境安装(win7)

    首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u13-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入&qu ...

  5. Morris.js-利用JavaScript生成时序图

    morris.js是一个轻量级的时间序列javascript类库,是网页显示图表的好工具.github项目地址:点击打开,使用起来很简单,但是需要你有一点网页设计的一些基本知识,对一个网页内容的结构要 ...

  6. hibernate课程 初探单表映射3-5 hibernate增删改查

    本节简介: 1 增删改查写法 2 查询load和查询get方法的区别 3 demo 1 增删改查写法 增加 session.save() 修改 session.update() 删除 session. ...

  7. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. H5如何做手机app(移动Web App)?图片轮播？ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  9. 移动端浏览器预览word、excel、ppt

    移动端浏览器没有自带预览office文档的工具,最近发现一个比较好用的工具,是office官方的工具,分享给大家: 官方文档地址: 用法:打开页面https://view.officeapps.liv ...

  10. Flash图表控件FusionCharts调整图表百分比大小

    用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值. 以百分比的方式调整图表,首先需要更新HTML代码,如下所示: <div id="chartContainer" ...