html,fix固定写法，固定上方 html固定div

yuyutoo 2024-10-11 21:38 8 浏览 0 评论

要实现一个搜索框始终固定在页面顶部，无论用户如何滚动页面，可以使用CSS的position: fixed;属性。fixed定位会使元素相对于浏览器窗口定位，而不是相对于父元素。这使得元素在页面滚动时保持固定位置。

.search {
    position: fixed; /* 相对于浏览器窗口定位 */
    top: 0; /* 顶部距离为0 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中修正 */
    z-index: 2; /* 确保搜索框显示在其他元素之上 */
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    background-color: white; /* 背景颜色 */
    padding: 10px; /* 内边距 */
    border-radius: 23px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    width: 80%; /* 设置宽度 */
    max-width: 600px; /* 最大宽度 */
}

说明

position: fixed;：使元素相对于浏览器窗口定位，而不是相对于父元素。
top: 0;：将搜索框固定在页面顶部。
left: 50%; 和 transform: translateX(-50%);：水平居中搜索框。
z-index: 2;：确保搜索框显示在其他元素之上。
background-color: white;：设置背景颜色。
padding: 10px;：设置内边距。
border-radius: 23px;：设置圆角。
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);：设置阴影效果，使搜索框看起来更美观。
width: 80%; 和 max-width: 600px;：设置搜索框的宽度。

完整示例

假设你的HTML结构如下：

html

深色版本

1<div class="search">
2  <form @submit.prevent="performSearch">
3    <input v-model="searchKeyword" placeholder="输入搜索关键字" />
4    <button type="submit">搜索</button>
5  </form>
6</div>
7
8<!-- 其他内容 -->

boxshadow

上一篇：CSS3 filter:drop-shadow与box-shadow区别
下一篇：2023年最新CSS3基础面试题 css3新特性面试题

html,fix固定写法，固定上方 html固定div

说明

完整示例

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源带详细搭建教程

html,fix固定写法，固定上方 html固定div

说明

完整示例

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源 带详细搭建教程

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程