解决头部使用 position:fixed; 固定定位后遮住下方内容的问题
1.在头部下面给一个空的 div
给这个div设置高度,把页面撑开,这种方法是让头部刚好遮住的是这个空div,把内容放出来。
但是这种方法需要一点点调试高度,所以不推荐。
2.把整个要使用 position:fixed; 的盒子,用另一个盒子包起来
比如说我有一个头部区域,需要固定
- <div class="head">
- <span class="iconfont icon-shouyeshouye"></span>
- <h1>演出列表</h1>
- </div>
- .head{
- width: 100%;
- height: 55px;
- position: fixed;
- }
这时候再向下写内容就会被头部遮住一部分,因为整个头部的高度为 55px ,所以用一个盒子把整个头部包起来,设置等高,就可以解决了
- <div class="box">
- <div class="head">
- <span class="iconfont icon-shouyeshouye"></span>
- <h1>演出列表</h1>
- </div>
- </div>
- .box{
- height: 55px;
- }
原文链接:https://blog.csdn.net/lolhuxiaotian/article/details/122229393
解决头部使用 position:fixed; 固定定位后遮住下方内容的问题的更多相关文章
- 移动端— position: fixed;固定定位解决方案
这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它: <meta name="viewport" content="width=device-w ...
- input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- CSS——fixed 固定定位相对于父容器
position:fixed 固定定位 用 left top 都是相对于浏览器的. 我今天想给网页做一个固定定位的导航 偶然间发现.可以用margin 相对于父容器定位. 小伙伴们可以试试. 不用le ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- 解决 IE6 position:fixed 固定定位问题
#e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:expression(eval(d ...
- 完美解决 IE6 position:fixed 固定定位问题
关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
随机推荐
- 10_Linux基础-SHELL入门1
@ 目录 10_Linux基础-SHELL入门1 一. 输入输出重定向 二. 2个特殊文件 三. here document 四. tee命令 五. 清空文件内容 六. SHELL入门 SHELL的变 ...
- SpringMVC前置复习以及扩展
SpringMVC ssm:mybatis+Spring+SpringMVC javaSE javaweb 框架 理解的DAO层和Service层 先简单来讲下Dao层,和Service层的概念: S ...
- noip2018提高组初赛试题
一.单项选择题(共 10 题,每题 2 分,共计 20 分: 每题有且仅有一个正确选项) \2. 下列属于解释执行的程序设计语言是( ). A. C B. C++ C. Pascal D. Pytho ...
- 使用filebeat接收rsyslog的日志
安装 下载好rpm包后直接安装 curl -L -O https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-7.7.0-x86_ ...
- 自定义异常、Java网络编程
day04 throw关键字 throw用来对外主动抛出一个异常,通常下面两种情况我们主动对外抛出异常: 1:当程序遇到一个满足语法,但是不满足业务要求时,可以抛出一个异常告知调用者. 2:程序执行遇 ...
- [开源]React/Vue通用的状态管理框架,不好用你来打我👀
为了防止被打,有请"燕双鹰"镇楼️♀️️️...o... 话说新冠3年,"状态管理框架"豪杰并起.群雄逐鹿,ReduxToolkit.Mobx.Vuex. ...
- 2021年3月-第01阶段-Linux基础-Linux系统的启动流程
Linux系统的启动流程 理解Linux操作系统启动流程,能有助于后期在企业中更好的维护Linux服务器,能快速定位系统问题,进而解决问题. 上图为Linux操作系统启动流程 1.加载BIOS 计算机 ...
- vue开发组件开发中的小技巧
声明:以下随笔由博主自主编写,也有部分引用网友的,引用部分版权归原作者所有,其他博主原创部分禁止转载.复制全部或部分用以重新发布! vue递归组件事件阻止冒泡 其实这里主要还有递归组件的自定义事件不生 ...
- Rust基本数据类型
基本类型 Rust 每个值都有其确切的数据类型,总的来说可以分为两类:基本类型和复合类型. 基本类型意味着它们往往是一个最小化原子类型,无法解构为其它类型(一般意义上来说),由以下组成: 数值类型: ...
- 使用Watchtower实现Docker容器自动更新
前言:通常情况下我们手动更新容器的步骤比较繁琐,需要四个步骤: 1.停止容器 2.删除容器 3.检查镜像更新情况,更新镜像 4.重新启动容器 容器少还无所谓,但要是需要更新大量的容器就会工作量巨大. ...