首页 > 其他分享 >日常开发记录-子绝父相,子盒子放置在父盒子右上角

日常开发记录-子绝父相,子盒子放置在父盒子右上角

时间:2023-04-04 15:23:05浏览次数:39  
标签:盒子 color 子绝 width background 父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
        .father {
            /* 父盒子相对定位 */
            position: relative;
            width: 90px;
            height: 90px;
            background-color: red;
        }
        .son {
            /* 子盒子绝对定位 */
            position: absolute;
            right: -8px;
            top:-8px;
            width: 20px;
            height: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

运行图片:

 

标签:盒子,color,子绝,width,background,父相
From: https://www.cnblogs.com/huguo/p/17286525.html

相关文章

  • 原创教程中兴ZXV10 B860AV2.1 Root,电视盒子通用Root方法
    研究了几天,终于把湖南移动送的ZXV10B860AV2.1 Root了,这款机子网上的信息很少。而且做的很严密,无法手动安装APK。系统内核限制了,本来妥协了,就弄个开机启动telnet和adbd......
  • 不坑盒子 V2023.0325 && 打工人插件 大众实用型办公高效利器。
    不坑盒子这是一个非常好用的插件工具,专门应用在Word文档和wps,支持Office2010以上的版本,操作也简单且实用。不坑盒子下载及使用说明 一键排版功能像是下面的自动排版......
  • css盒子水平垂直居中的几种方式
    第一种:son盒子中定位的上下左右全部为0,然后margin:auto1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metahttp-equiv="X-U......
  • 内层图片元素高度自适应,外层盒子高度如何保持跟图片高度一致?
    在开发的过程中,外层盒子高度不确定的情况下,想要跟内层图片高度保持一致,内层图片高度设为width:100%;height:auto;外层box高度也是width:100%;height:auto.为什么会比图片本......
  • 盒子文字的阴影 和 浮动
    知识点一:盒子模型的阴影是四个数值,box-shadow:10px   10px 10px  -4px   rgba(0,0,0,0.3);文字阴影:text-shadow:5px 6px  5px  rgba(0,0,0,0.3);知识点......
  • CSS3弹性盒子
    传统布局与flex布局传统布局兼容性好布局繁琐局限性,不能在移动端很好地布局flex弹性布局操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况不如移......
  • 弹性盒子模型
    弹性盒子模型(flexbox)定义弹性盒子是CSS3的一种新的布局模式CSS3弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入......
  • CSS盒子模型(Box Model)
    CSS盒子模型(BoxModel) 概念所有HTML元素可以看作盒子,在CSS中,"boxmodel"这一术语是用来设计和布局时使用CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包......
  • 【Unity3D】绘制物体外框线条盒子
    1需求描述​点选物体、框选物体、绘制外边框中介绍了物体投影到屏幕上的二维外框绘制方法,本文将介绍物体外框线条盒子绘制方法。内框:选中物体后,绘制物体的内框(紧......
  • 盒子模型——页面布局的灵魂
       ......