首页 > 其他分享 >div-固定在页面中间,不被其他元素覆盖

div-固定在页面中间,不被其他元素覆盖

时间:2024-08-09 15:42:07浏览次数:11  
标签:覆盖 元素 把子 设置 div 页面

最开始设置的子元素D 是text-align:center,子元素C的内容过长的时候,会发现子元素D不在页面正中了

所以需要把子元素D设置成固定中间,把子元素D设置成固定中间后,发现元素B把子元素D给覆盖了一部分,

所以需要在父元素A和元素B之间加一个空的div,给div设置高度后,父元素A和元素B之间的距离就是div的高度

 

父元素A:positon:relative;

子元素D:position:absolute;left:30%;right:30;

子元素C:float:left;

子元素E:float:right;

 元素B

这个时候会发现下面的元素B会把这个父元素A覆盖上

需要在两者之间加一个空的div,然后设置一个高度,两个元素就会隔开这个高度的距离

 

 

<div style="text-align: center;margin-bottom:10px;position:relative">
      <div style="float:left;font-weight: bold;">{{ selectDept }}</div>
      <div style="position:absolute;left:30%;right:30%;margin-bottom:10px;">
        <a @click="getThisWeekData(currentData.startData, -7)"><a-icon type="left"/></a>
        <span style="margin-left:10px;margin-right:10px;font-weight:bold;">{{ currentData.startData }} ~ {{ currentData.endData }}</span>
        <a @click="getThisWeekData(currentData.startData, 7)"><a-icon type="right"/></a>
      </div>
      <a-button type="primary" style="float:right;" size="small" @click="getThisWeekManHour">本周</a-button>
      <div style="height:20px;"></div>
    </div>

 

标签:覆盖,元素,把子,设置,div,页面
From: https://www.cnblogs.com/comeoncode/p/18350825

相关文章

  • fiftyone localhost:5151页面打开空白 error: disallowed MIME type (“text/plain”)
    解决办法:您必须更改两个键的注册表设置。打开注册表编辑器并前往Computer\HKEY_CLASSES_ROOT\.js并更改ContentType为application/javascript前往Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.js并更改 ContentType为application/javascript。然后只需重新启动shell......
  • 使用python做页面,测试数据库连通性!免费分享!测试通过~
    免费分享刚刚写的一个小程序,测试通过没问题,解BUG也就花了半小时吧有更好的方法欢迎评论区推给我谢谢。importtkinterastkfromtkinterimportmessageboximportpymysqldefget_db_info(db_source):ifdb_source=='database1':hostname=e1.get()......
  • PHP提升页面加载速度的技巧:打造高效Web应用
    本文由ChatMoney团队出品1.代码优化1.1减少复杂性简化PHP代码可以显著提升执行速度。避免过多的嵌套循环和条件判断,尽量使用内置函数代替自定义函数,因为内置函数通常经过高度优化。1.2函数调用优化频繁的函数调用会产生额外的开销。可以尝试将一些常用函数的调用替换为......
  • 能够提升PHP页面加载速度的技巧
    本文由ChatMoney团队出品1.代码优化1.1减少复杂性简化PHP代码可以显著提升执行速度。避免过多的嵌套循环和条件判断,尽量使用内置函数代替自定义函数,因为内置函数通常经过高度优化。1.2函数调用优化频繁的函数调用会产生额外的开销。可以尝试将一些常用函数的调用替换为......
  • Python面试宝典第30题:找出第K大元素
    题目        给定一个整数数组nums,请找出数组中第K大的数,保证答案存在。其中,1<=K<=nums数组长度。        示例1:输入:nums=[3,2,1,5,6,4],K=2输出:5        示例2:输入:nums=[50,23,66,18,72],K=3输出:50快速选择算法......
  • 编写一个函数接受这些参数:内含int类型元素的数组名,数组的大小和一个代表选取次数的值
    /编写一个函数接受这些参数:内含int类型元素的数组名,数组的大小和一个代表选取次数的值。该函数从数组中随机指定数量的元素,并打印他们。每个元素只能选择一次(模拟抽奖数字或挑选陪审团成员)。另外,如果你的实现有time()或类似的函数,可以在srand()中使用这个函数的输出来初始化......
  • 小白学习微信小程序的跨页面通信和数据传递
    跨页面通信和数据传递在微信小程序开发中非常重要,它们可以帮助不同页面之间共享数据并实现页面间的交互。本文将详细介绍微信小程序中的跨页面通信和数据传递的相关知识,并提供代码案例进行说明。小程序中跨页面通信的方式主要包括:使用全局变量使用事件总线使用页面栈数据传......
  • DzzOffice 新闻插件查看页面添加水印
    文件:\dzz\news\template\news_view.htm这里以显示用户名水印为示例<scripttype="text/javascript">//需要用到的地方调用就好watermark({watermark_txt:'$_G[username]'})functionwatermark(settings){//默认设置vardefaultSettings={......
  • 实现qt页面cpp
    在Qt中实现一个具体的界面,首先需要确定你的界面需求,包括需要哪些控件(如按钮、文本框、标签等)、布局方式(如垂直布局、水平布局、网格布局等)以及可能的交互逻辑。下面是一个简单的步骤,用于在Qt中实现一个基本的界面:创建Qt项目:使用QtCreator创建一个新的QtWidgetsApplicat......
  • Codeforces Round 964 (Div. 4)
    知识点1.对于两个数字,一个乘n,一个除以n,可以理解为n进制下的这个数乘10和除10。比如E题用这个知识点就可以很快的解决问题。题解A.A+BAgain?#include<bits/stdc++.h>#defineintlonglongusingnamespacestd;voidsolve(){ strings; cin>>s; cout<<s[0]-'0'+s[1]-......