位置固定元素

2024-01-09

我真的被 HTML5 的一个小问题困扰了。

我只是想定位一个固定元素,我有一个 jpg 作为标题,在下面我有一个名为 menu 的 div,其中包含导航。

我一直在尝试通过 jss 和许多 css 规则使这个 div 菜单固定,因为当我向下滚动时,我希望该 div 保持在顶部位置,而页面的其余部分滚动。

这是代码,谢谢大家!

//Edit1:我尝试过使用标题CSS,但这不是重点,我试图覆盖菜单,甚至标题,我找到了一个示例,但我无法成功编辑代码:

http://poselab.com/contenidos/position-fixed/relative-position-fixed.html http://poselab.com/contenidos/position-fixed/relative-position-fixed.html

JSFiddle 链接 http://jsfiddle.net/kesarkes/uJsHL/

<body bgcolor="#FFFFFF">
<div class="wrapper">
    <header>
        <img src="../doc/img/cabecera.png" width="1024" height="170" alt="" />
    </header>http://jsfiddle.net/kesarkes/uJsHL/embedded/result/
    <!--<div class="fijado">-->
    <div class="menu">
        <nav align="center">
            <ul>
                <li id="home1"><a href="index.html">home</a>
                </li>
                <li id="folio2"><a href="#b1">folio</a>
                </li>
                <li id="bio3"><a href="#bioinfo">bio</a>
                </li>
                <li><a href="contact.html" target="_blank">contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <!--</div>-->
    <!--<div id="slideshow"></div>-->
    <div class="slideshow"></div>
    <div class="fotos">
        <hr id="b1"></hr>
        <div class="grupo_foto"><a href="1"><div class="grupo_foto1_1"></div></a>
        </div>
        <div class="grupo_foto2"><a href="1"><div class="grupo_foto2_1"></div></a>
        </div>
        <div class="grupo_foto3"><a href="1"><div class="grupo_foto3_1"></div></a>
        </div>
        <div class="grupo_foto4"><a href="1"><div class="grupo_foto4_1"></div></a>
        </div>
    </div>
    <div id="bioinfo">
        <hr id="b2"></hr>
        <div id="fotokes" title="Hi, it's me!">
            <p>
                <img src="../doc/img/img_kes.png" width="156" height="170" alt="César M.Posada" />
            </p>
        </div>
        <div id="texto">
            <p>Born in 1990 in Madrid, Cesar Martinez is an Informatic Engineer who is currently focused in graphic design, web building, photography, 3D and many other fields about graphic arts. His main work also includes very suitable offers like publicity work, media promo or corporative image. He has a clear and simple style according with new tendencies which is the most important target in his job.</p>
        </div>
    </div>
    <div id="redes">
        <div id="red_twitter" title="Twitter">  <a href="https://twitter.com/_CesarPosada" target="_blank"><div id="red_twitter1">
</div></a>
        </div>
        <div id="red_facebook" title="Facebook">    <a href="https://www.facebook.com/cesar.martinezposada" target="_blank"><div id="red_facebook1"></div></a>  
        </div>
        <div id="red_flickr" title="Flickr">    <a href="https://www.flickr.com/photos/kesdesigns/" target="_blank"><div id="red_flickr1"></div></a>

        </div>
        <div id="red_contact" title="Contact me">   <a href="r" target="_blank"><div id="red_contact1"></div></a>

        </div>
    </div>
</div>

需要添加,不添加请注意z-index那么内容将与您的代码重叠标题。

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

检查更新的小提琴

Demo http://jsfiddle.net/uJsHL/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

位置固定元素 的相关文章

  • 基于范围内变量的角度设置形式动作

    我一直在尝试设置一个搜索表单 可以在其中注入表单操作属性 在我的表格中我有
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 无法从 JQuery ajax 调用接收 JSON

    我已经确定来自服务器的 JSON 是有效的 手动进行 ajax 调用 但我真的很想使用 JQuery 我还使用 firebug 确定发送到服务器的 post URL 是正确的 但是 错误回调仍然被触发 解析错误 我还尝试了数据类型 文本 我
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • 仅使用 HTML 和 CSS 制作弧形帆形状?

    是否可以仅使用 HTML 和 CSS 创建下面的弧形帆形状 我可以看到从这个答案 https stackoverflow com questions 7073484 how does this css triangle shape work
  • select2 验证 - 选择至少一个值

    我在用select2 http ivaynberg github io select2 and jQuery 验证 http jqueryvalidation org 插件 select2 的 HTML div class form gro
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • 从浏览器访问本地文件?

    您好 我想从浏览器访问系统的本地文件 由于涉及大量安全检查 是否可以通过某种方式实现这一目标 或使用 ActiveX 或 Java Applet 的任何其他工作环境 请帮帮我 要通过浏览器访问本地文件 您可以使用签名的 Java Apple
  • 浮动CSS属性导致父div不继承高度?

    我在 div 中有一个元素设置为float right但是 它会导致最外面的 div 不环绕 这是jsfiddle http jsfiddle net W792X 5 for it 我试图让提交按钮在 div 内浮动 但设置该属性似乎会导致
  • 如何禁用网页中的萤火虫?

    如何使用 Javascript 禁用 firebug 我想这样做是为了向访问者隐藏我的网页的运作方式 有什么选择可以做到这一点吗 你不能 你能做的最好的事情就是混淆你的 JavaScript 实际上刮掉了 您能做的最好的事情就是将所有安全关
  • jQuery DataTables:隐藏最后一行的“删除”按钮

    我有一个DataTable在某些情况下可以返回多个页面 返回的每一行都显示一个删除按钮 但我需要它在返回的最后一行上隐藏此按钮 无论是 1 pg 还是多个 因此不能在其中使用 CSS 我想学习如何实现这一点 因为DataTables对我来说
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 加载 Angular 库时,IE9 和 IE10 中出现 Angular JS“SCRIPT5007:预期对象”错误

    我正在开发一个 AngularJS 应用程序 该应用程序应在 Firefox IE 9 和 IE 10 上运行 我使用最新版本的 angularjs 库 现在是 1 3 15 服务器端是在JavaEE平台上用Java编写的 服务器运行在Gl
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male

随机推荐

  • Git - 切换分支(窗口)和未提交的更改

    我很难理解一些 git DCVS 概念 事情是这样的 我创建了一个 git 项目 并从 SVN 存储库导入它 我做了一些承诺 我想尝试一些东西 所以我创建了一个名为常量更新 我切换到常量更新分支 移动一些文件 删除其他文件并添加更多文件 我
  • Scala:如何为任何案例类定义抽象可复制超类?

    请耐心等待 在 OP 有意义之前 有一些背景 我正在使用 Slick 3 1 x 和 slick 代码生成器 顺便说一句 整个源代码可以在play authenticate usage scala github 项目 https githu
  • Kotlin 的 DAO 应该返回Optional还是null?

    在 Kotlin JPA 之前 我曾经这样编写 DAO 层 public interface UserDao extends JpaRepository
  • SQL 中 SELECT * 有什么缺点吗?

    假设我有一个执行 SQL 的程序 并且我想在表中查询 A B 和 C 列中的值 假设有一些列我并不严格需要 SELECT 和 SELECT A B C 有什么区别 到目前为止我的想法如下 仅选择您需要的列 将需要更少的内存来存储结果 可能会
  • 在没有“脚本”条目的情况下实现“npm run x”行为?

    在已安装的 上下文 中运行节点命令node modules 您可以在scripts现场package json Eg scripts test mocha recursive test js compilers js babel regis
  • OS X sed -E 不接受扩展正则表达式

    我一直在尝试各种方法在 OS X 上使用 sed 做一些基本的事情 以下是一些简单测试的结果 echo foo bar 2011 03 17 17 31 47 foo bar sed s foo FOUND g 回报 如预期 FOUND b
  • Xcode账户认证失败

    当我尝试登录 Apple ID 帐户时出现问题 重新登录也没用 Xcode 14 0 我也遇到了同样的问题 我就是这样解决的 您必须访问该部分Xcode 帐户是 要访问它 您可以通过View accounts警告中出现的按钮或通过Xcode
  • bash 脚本可以同时运行命令然后等待它们完成吗?

    我想编写一个 bash 脚本 在其中同时运行两个命令 然后在它们都完成后继续 这是不起作用的 但我将其放在这里来说明我正在尝试做的事情 bin bash job1 job2 dostuffwithresults 该脚本将同时运行 job1
  • Selenium WebDriver 和 InternetExplorer

    我最近更新到 Selenium 2 24 1 以使 Firefox 13 正常工作 通过此更新 您现在可以运行类似于 chromedriver exe 的可执行文件 以便将事件分派到 IE 然而我没有运气让测试与 IE 一起运行 为了让它在
  • 如何在FOR循环中批量获取当前路径%CD%的信息?

    我设置了一个环境变量 其中包含多个逗号分隔的目录路径 并使用FOR循环将当前目录设置为变量中的下一个目录路径 我尝试获取当前路径 但结果看起来很奇怪 我尝试使用以下代码 set a C test A C test B C test C fo
  • lambda 和 LINQ 之间的区别? [复制]

    这个问题在这里已经有答案了 有人可以解释一下 lambda 和 linq 之间的区别吗 请不要向我指出其他 stackexchange 答案或琐碎的解释 我已经检查了其中的大部分 它们非常令人困惑 这些天我使用了一些 LINQ 我相信 其表
  • 更改来自 Lambda (Node.js) 的 Cloudwatch 日志的日志格式

    If I do console log message 在我的代码中 它在 Cloudwatch 中显示为 2017 03 16T18 58 21 823Z 863c835c 0a7a 11e7 9140 e5018d6e5029 mess
  • Hibernate Session 不使用 JpaTransactionManager 事务

    我正在开发一个使用 Spring 框架 4 3 3 RELEASE 和 Hibernate 5 2 3 Final 的项目 并且我开始转向使用 Spring Data JPA 我刚刚迁移了LocalSessionFactoryBean wi
  • DialogFragment 中未调用 OnCancelListener

    我有一个简单的AlertDialog显示一些项目的列表 单击其中一个项目后 所单击的项目将传回封闭的项目Activity 我还想在用户取消对话框时执行一些默认处理 使用返回键 更具体地说 在这种情况下 我想将空字符串传递给活动 但是 如果我
  • 在另一个用户上下文中执行代码

    我有一个应用程序 其清单需要以管理员身份运行 但该应用程序的一部分是使用 WNetAddConnection2 映射驱动器 我认为由于凭据等原因 它需要在正常用户上下文中运行 有没有办法执行此操作普通用户上下文中的一些代码 无需创建单独的进
  • 在 CentOS 上安装 psycopg2 时遇到问题

    我正在尝试在 CentOS 上安装 psycopg2 我遵循了这方面的所有内容tutorial http thebuild com blog 2009 10 17 wordpress to djangopostgresql part 3 i
  • 如何使用多个索引从 NumPy 数组中获取值

    我有一个 NumPy 数组 如下所示 arr np array 100 10 200 42 4 14 89 00 34 55 1 12 如何通过索引从该数组中获取多个值 例如 如何获取索引位置1 4 5处的值 我正在尝试这样的事情 这是不正
  • 使用资源设置窗口背景颜色

    我需要使用资源来设置 WPF 应用程序中主窗口的颜色 由于资源声明位于窗口声明之后 我正在导入资源字典 因此我无法使用Background财产在Window目的 所以 我想我应该这样设置背景
  • 如何使用 LAG() 忽略 BigQuery 中的空值?

    使用时LAG 在 BigQuery 标准 SQL 中 https cloud google com bigquery docs reference standard sql functions and operators 如何跳过NULL值
  • 位置固定元素

    我真的被 HTML5 的一个小问题困扰了 我只是想定位一个固定元素 我有一个 jpg 作为标题 在下面我有一个名为 menu 的 div 其中包含导航 我一直在尝试通过 jss 和许多 css 规则使这个 div 菜单固定 因为当我向下滚动