【TRICK】解决锚点定位向下浮动Xpx问题

1. 问题描述

页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx。

2. 解决办法

a. 设定占位锚点,并给占位锚点设置样式,比如

    <a href="#test">hehehe</a>
    <div style="height:400px;width:100%;background:red;"></div>
    <div id="test">
        <span class="anchor"></span>
        <div id="main" style="height:400px"></div>
    </div>
    <div style="height:800px;width:100%;background:green;"></div>
    .anchor {
        display: block;
        height: 115px;
        margin-top: -115px;
        visibility: hidden;
    }

b. 使用:target  伪类

时间: 2024-10-09 09:57:11

【TRICK】解决锚点定位向下浮动Xpx问题的相关文章

CSS定位机制之浮动定位float

一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果希望块元素在页面中水平排列,可以使块元素脱离文档流(使用float使元素浮动) 元素浮动脱离文档流之后,原有的位置不会保留,会被其他文档流元素占据. (二). 当设置了浮动定位后(float属性非none的值),元素会立即左上或右上浮动,而浮动元素会盖住文档流元素.如图一所示,框1设置浮动之后脱离文档流

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以

返回顶部(解决IE6固定定位)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 &l

1.4.16- HTML之锚点定位

通过创建锚点连接,用户能够快速定位到目标内容,创建锚点连接分为两步: 1.使用<a href= "#id">链接文本</a> 创建链接文本 2.使用相应的id名称标注跳转目标的位置. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

定位流和浮动定位

定位流(position属性)的分类 1.相对定位(relative) 2.绝对定位 3.固定定位 4.静态定位 相对定位 什么是相对定位? 就是相对于自己以前在标准流中的位置来移动,相对定位需要配合top/left/right/bottom属性使用 相对定位注意点 1.相对定位是不脱离标准流的,会继续在标准流中占用一份空间 2.在相对定位中,同一个方向上的属性只能使用一个 3.由于相对定位是不脱离标准文档流的,所以在相对定位中是区分块级元素/行内元素/行内块级元素, 即行内元素即使设置为pos

Android解决WebView的定位功能、视频全屏播放、下载功能、页面Url的处理、进度条处理

解决WebView的定位功能.视频全屏播放.下载功能.页面Url的处理.进度条处理 事先说明: 定位功能在安卓6.0需要用户手动确认权限后才能使用 若需在安卓6.0适配WebView的定位功能,则需要在WebView中手动增加用户权限访问 详细可百度安卓6.0权限管理系统,或者采用第三方封装好的权限管理类进行编写(如Bmob) 如果对内容不理解的话,可参考最后的整个类的代码 如果对BaseActivity这个抽象类不理解的话,可以查看下面一篇文章对BaseActivity的介绍 步骤一:webv

解决Qt程序在Linux下无法输入中文的办法

一位网友问我如何在Linux的Qt的应用程序中输入中文,我一开始觉得不是什么问题,但是后面自己尝试了一下还真不行.不仅是Qt制作的应用程序,就连Qt Creator都无法支持.后面看了一些资料,了解了Qt应用程序的方法,这里和大家分享一下. 写一个bash脚本,内容如下: #!/bin/sh cd YourBinaryDirectory export QT_IM_MODULE=iBus ./YourProjectBinary 如果想让Qt Creator也能输入中文,那么可以这么写: #!/bi

html中设置锚点定位的几种常见方法(#号定位)

在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>11111111111

解决cordova命令行方式下build或者run的时候报错问题

phonegap3.0之后就将项目的生成方式做了很大的更改,原来是在eclipse里面修改生成并编译运行,但是3.0之后它的目录结构发生了很大变化,只修改主目录下面的index.html如果不build的话有时候是不起作用的,因为它的platform文件夹中还有各个平台的目录.比如安卓和IOS,在主目录www下面修改index.html之后必须要build才能生效,否则很多时候你会发现修改了不起作用,这是因为在assets目录下还有个www文件夹,真正运行的是这个文件夹下面的index.html