LayoutMaster 首页 布局示例 教程 关于 登录 注册 首页 布局示例 教程 关于 登录 注册 布局分类 探索不同的 CSS 布局技术 Fixed 定位 Relative 定位 AbLayoutMaster 首页 布局示例 教程 关于 登录 注册 首页 布局示例 教程 关于 登录 注册 布局分类 探索不同的 CSS 布局技术 Fixed 定位 Relative 定位 AbLayoutMaster 首页 布局示例 教程 关于 登录 注册 首页 布局示例 教程 关于 登录 注册 布局分类 探索不同的 CSS 布局技术 Fixed 定位 Relative 定位 Ab
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position 复杂布局示例</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
dark: '#1F2937',
light: '#F3F4F6'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-hover {
@apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}
}
</style>
<style>
/* 导入字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* 基础样式 */
body {
font-family: 'Inter', sans-serif;
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- 固定导航栏 - position: fixed -->
<header class="fixed top-0 left-0 right-0 bg-white shadow-md z-50 transition-all duration-300" id="navbar">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fa fa-cubes text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-dark">LayoutMaster</h1>
</div>
<!-- 桌面导航 -->
<nav class="hidden md:flex items-center space-x-8">
<a href="#" class="font-medium text-primary hover:text-primary/80 transition-colors">首页</a>
<a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">布局示例</a>
<a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">教程</a>
<a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">关于</a>
</nav>
<!-- 移动端菜单按钮 -->
<button class="md:hidden text-gray-600 focus:outline-none" id="menuToggle">
<i class="fa fa-bars text-xl"></i>
</button>
<!-- 登录/注册按钮 -->
<div class="hidden md:flex items-center space-x-4">
<button class="px-4 py-2 rounded-md text-primary border border-primary hover:bg-primary/5 transition-colors">登录</button>
<button class="px-4 py-2 rounded-md bg-primary text-white hover:bg-primary/90 transition-colors shadow-md">注册</button>
</div>
</div>
<!-- 移动端导航菜单 - position: absolute -->
<div class="md:hidden hidden bg-white shadow-lg absolute w-full left-0 top-full border-t border-gray-100" id="mobileMenu">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
<a href="#" class="font-medium text-primary py-2 border-b border-gray-100">首页</a>
<a href="#" class="font-medium text-gray-600 py-2 border-b border-gray-100">布局示例</a>
<a href="#" class="font-medium text-gray-600 py-2 border-b border-gray-100">教程</a>
<a href="#" class="font-medium text-gray-600 py-2 border-b border-gray-100">关于</a>
<div class="flex space-x-4 pt-2">
<button class="flex-1 px-4 py-2 rounded-md text-primary border border-primary hover:bg-primary/5 transition-colors">登录</button>
<button class="flex-1 px-4 py-2 rounded-md bg-primary text-white hover:bg-primary/90 transition-colors shadow-md">注册</button>
</div>
</div>
</div>
</header>
<!-- 回到顶部按钮 - position: fixed -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white rounded-full p-3 shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none">
<i class="fa fa-arrow-up"></i>
</button>
<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-16">
<div class="flex flex-col lg:flex-row gap-8">
<!-- 粘性侧边栏 - position: sticky -->
<aside class="lg:w-1/4">
<div class="sticky top-24 bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-gradient-to-r from-primary to-accent p-6 text-white">
<h2 class="text-2xl font-bold mb-2">布局分类</h2>
<p class="text-white/80">探索不同的 CSS 布局技术</p>
</div>
<div class="p-4">
<ul class="space-y-1">
<li>
<a href="#fixed" class="flex items-center p-3 rounded-lg bg-primary/10 text-primary font-medium">
<i class="fa fa-map-pin w-6"></i>
<span>Fixed 定位</span>
</a>
</li>
<li>
<a href="#relative" class="flex items-center p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
<i class="fa fa-arrows-alt w-6"></i>
<span>Relative 定位</span>
</a>
</li>
<li>
<a href="#absolute" class="flex items-center p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
<i class="fa fa-crosshairs w-6"></i>
<span>Absolute 定位</span>
</a>
</li>
<li>
<a href="#sticky" class="flex items-center p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
<i class="fa fa-thumbtack w-6"></i>
<span>Sticky 定位</span>
</a>
</li>
<li>
<a href="#z-index" class="flex items-center p-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
<i class="fa fa-sort-numeric-up w-6"></i>
<span>Z-index 堆叠</span>
</a>
</li>
</ul>
<div class="mt-6 pt-6 border-t border-gray-100">
<h3 class="font-semibold text-gray-800 mb-3">相关资源</h3>
<a href="#" class="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-700 transition-colors mb-2">
<i class="fa fa-book mr-2 text-gray-500"></i> CSS 布局指南
</a>
<a href="#" class="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-700 transition-colors">
<i class="fa fa-play-circle mr-2 text-gray-500"></i> 布局教程视频
</a>
</div>
</div>
</div>
</aside>
<!-- 内容区域 -->
<div class="lg:w-3/4">
<section class="mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">CSS Position 复杂布局示例</h2>
<p class="text-gray-600 mb-8 max-w-3xl">
探索 CSS position 属性的强大功能，通过实际示例了解如何使用 fixed、relative、absolute、sticky 定位和 z-index 控制创建复杂而灵活的网页布局。
</p>
<!-- 绝对定位卡片示例 - position: absolute -->
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-12" id="absolute">
<div class="relative h-64 md:h-80 overflow-hidden">
<img src="https://picsum.photos/1200/600" alt="示例图片" class="w-full h-full object-cover">
<!-- 绝对定位叠加层 -->
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<!-- 绝对定位文本 -->
<div class="absolute bottom-0 left-0 p-6 md:p-8 text-white">
<span class="inline-block px-3 py-1 bg-primary rounded-full text-sm font-medium mb-3">绝对定位示例</span>
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-shadow">探索绝对定位的强大功能</h3>
<p class="text-white/90 mb-4 max-w-2xl">绝对定位允许元素相对于最近的已定位祖先元素进行定位，创建出重叠和悬浮的视觉效果。</p>
<button class="px-5 py-2 bg-white text-primary rounded-lg font-medium hover:bg-gray-100 transition-colors shadow-md">
了解更多
</button>
</div>
<!-- 绝对定位标签 -->
<div class="absolute top-4 right-4 bg-accent text-white px-3 py-1 rounded-full text-sm font-medium shadow-md">
热门
</div>
</div>
</div>
<!-- Fixed 定位示例 -->
<div class="bg-white rounded-xl shadow-md p-6 mb-12" id="fixed">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fa fa-map-pin text-primary mr-2"></i>
Fixed 定位示例
</h3>
<p class="text-gray-600 mb-6">Fixed 定位使元素相对于浏览器窗口固定，即使页面滚动也保持在原位。</p>
<div class="relative h-64 bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-gray-500">滚动此容器查看 fixed 元素效果</p>
</div>
<!-- Fixed 元素（相对于容器） -->
<div class="fixed-element relative-to-container absolute top-4 right-4 bg-primary text-white px-3 py-2 rounded-lg shadow-md">
<i class="fa fa-info-circle mr-1"></i> 固定信息
</div>
</div>
<div class="mt-4 text-sm text-gray-500">
<p>注意：上面的固定元素是相对于示例容器的视觉演示，实际的 fixed 元素会相对于浏览器窗口。</p>
</div>
</div>
<!-- Relative 定位示例 -->
<div class="bg-white rounded-xl shadow-md p-6 mb-12" id="relative">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fa fa-arrows-alt text-primary mr-2"></i>
Relative 定位示例
</h3>
<p class="text-gray-600 mb-6">Relative 定位使元素相对于其正常位置进行偏移，不会影响其他元素的布局。</p>
<div class="relative h-64 bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
<!-- 正常元素 -->
<div class="absolute top-4 left-4 bg-gray-300 px-4 py-2 rounded-lg">
正常位置元素
</div>
<!-- 相对定位元素 -->
<div class="relative-element relative top-10 left-10 bg-secondary text-white px-4 py-2 rounded-lg shadow-md">
相对定位元素 (top: 10px, left: 10px)
</div>
<!-- 正常元素 -->
<div class="absolute bottom-4 right-4 bg-gray-300 px-4 py-2 rounded-lg">
正常位置元素
</div>
</div>
</div>
<!-- Sticky 定位示例 -->
<div class="bg-white rounded-xl shadow-md p-6 mb-12" id="sticky">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fa fa-thumbtack text-primary mr-2"></i>
Sticky 定位示例
</h3>
<p class="text-gray-600 mb-6">Sticky 定位使元素在滚动到视口特定位置时固定，常用于导航栏和侧边栏。</p>
<div class="relative h-96 overflow-y-auto border border-gray-200 rounded-lg">
<div class="p-4">
<p class="mb-4">滚动此容器查看 sticky 效果。</p>
<!-- 内容占位 -->
<div class="space-y-4 h-200">
<div class="h-24 bg-gray-100 rounded-lg p-4 flex items-center justify-center">内容块 1</div>
<div class="h-24 bg-gray-100 rounded-lg p-4 flex items-center justify-center">内容块 2</div>
<!-- Sticky 元素 -->
<div class="sticky-element sticky top-4 bg-accent text-white px-4 py-3 rounded-lg shadow-md">
<i class="fa fa-star mr-1"></i> 粘性导航标签
</div>
<div class="h-24 bg-gray-100 rounded-lg p-4 flex items-center justify-center">内容块 3</div>
<div class="h-24 bg-gray-100 rounded-lg p-4 flex items-center justify-center">内容块 4</div>
<div class="h-24 bg-gray-100 rounded-lg p-4 flex items-center justify-center">内容块 5</div>
<div class="h-24 bg-gray-100 rounded-lg p-4 flex items-center justify-center">内容块 6</div>
</div>
</div>
</div>
</div>
<!-- Z-index 堆叠示例 -->
<div class="bg-white rounded-xl shadow-md p-6 mb-12" id="z-index">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fa fa-sort-numeric-up text-primary mr-2"></i>
Z-index 堆叠示例
</h3>
<p class="text-gray-600 mb-6">Z-index 控制定位元素的堆叠顺序，值越大的元素越靠前。</p>
<div class="relative h-64 bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
<!-- Z-index 1 -->
<div class="absolute top-10 left-10 w-32 h-32 bg-primary/80 rounded-lg z-10 flex items-center justify-center text-white font-medium shadow-lg">
Z-index: 10
</div>
<!-- Z-index 2 -->
<div class="absolute top-20 left-20 w-32 h-32 bg-secondary/80 rounded-lg z-20 flex items-center justify-center text-white font-medium shadow-lg">
Z-index: 20
</div>
<!-- Z-index 3 -->
<div class="absolute top-30 left-30 w-32 h-32 bg-accent/80 rounded-lg z-30 flex items-center justify-center text-white font-medium shadow-lg">
Z-index: 30
</div>
</div>
</div>
<!-- 卡片网格示例 - 结合多种定位技术 -->
<h3 class="text-xl font-bold mb-6 flex items-center">
<i class="fa fa-th-large text-primary mr-2"></i>
综合布局示例：卡片网格
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<!-- 卡片 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/400/300?random=1" alt="卡片图片" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h4 class="font-bold text-lg">卡片标题 1</h4>
<p class="text-white/80 text-sm">探索绝对定位的强大功能</p>
</div>
<div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
新特性
</div>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">这是一个使用多种定位技术创建的卡片示例，展示了如何结合绝对定位和相对定位创建视觉层次感。</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors text-gray-700 font-medium">
查看详情
</button>
</div>
</div>
<!-- 卡片 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/400/300?random=2" alt="卡片图片" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h4 class="font-bold text-lg">卡片标题 2</h4>
<p class="text-white/80 text-sm">探索固定定位的应用场景</p>
</div>
<div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">
热门
</div>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">固定定位在创建导航栏和悬浮元素时非常有用，这个卡片展示了如何实现固定效果。</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors text-gray-700 font-medium">
查看详情
</button>
</div>
</div>
<!-- 卡片 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/400/300?random=3" alt="卡片图片" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h4 class="font-bold text-lg">卡片标题 3</h4>
<p class="text-white/80 text-sm">粘性定位的实际应用</p>
</div>
<div class="absolute top-3 right-3 bg-accent text-white text-xs font-bold px-2 py-1 rounded">
教程
</div>
</div>
<div class="p-4">
<p class="text-gray-600 mb-4">粘性定位结合了相对定位和固定定位的特性，在滚动时提供了流畅的导航体验。</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors text-gray-700 font-medium">
查看详情
</button>
</div>
</div>
</div>
</section>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fa fa-cubes text-primary text-2xl"></i>
<h2 class="text-xl font-bold">LayoutMaster</h2>
</div>
<p class="text-gray-400 mb-4">探索 CSS 布局的无限可能，从基础到高级技巧，助你成为布局大师。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">布局示例</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">教程</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">资源</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">CSS 参考</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">布局教程</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">社区论坛</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">联系我们</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
<span class="text-gray-400">北京市朝阳区科技园 A 座 1001 室</span>
</li>
<li class="flex items-center">
<i class="fa fa-envelope text-primary mr-3"></i>
<a href="mailto:contact@layoutmaster.com" class="text-gray-400 hover:text-white transition-colors">contact@layoutmaster.com</a>
</li>
<li class="flex items-center">
<i class="fa fa-phone text-primary mr-3"></i>
<a href="tel:+8610123456789" class="text-gray-400 hover:text-white transition-colors">+86 (10) 1234-5678</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm">© 2025 LayoutMaster. 保留所有权利。</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
<a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">Cookie 政策</a>
</div>
</div>
</div>
</footer>
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('py-2', 'shadow-lg');
navbar.classList.remove('py-3', 'shadow-md');
} else {
navbar.classList.add('py-3', 'shadow-md');
navbar.classList.remove('py-2', 'shadow-lg');
}
});
// 移动端菜单切换
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
if (mobileMenu.classList.contains('hidden')) {
menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
} else {
menuToggle.innerHTML = '<i class="fa fa-times text-xl"></i>';
}
});
// 回到顶部按钮
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.remove('opacity-0', 'invisible');
backToTopBtn.classList.add('opacity-100', 'visible');
} else {
backToTopBtn.classList.add('opacity-0', 'invisible');
backToTopBtn.classList.remove('opacity-100', 'visible');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// 关闭移动端菜单
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
}
}
});
});
// 为示例添加动画效果
document.addEventListener('DOMContentLoaded', () => {
// 模拟 fixed 定位元素
const fixedElement = document.querySelector('.fixed-element');
const container = fixedElement.closest('.relative');
container.addEventListener('scroll', () => {
const scrollTop = container.scrollTop;
fixedElement.style.transform = `translateY(${scrollTop}px)`;
});
// 模拟 relative 定位元素
const relativeElement = document.querySelector('.relative-element');
relativeElement.style.transform = 'translate(10px, 10px)';
// 模拟 sticky 定位元素
const stickyElement = document.querySelector('.sticky-element');
const stickyContainer = stickyElement.closest('.overflow-y-auto');
stickyContainer.addEventListener('scroll', () => {
const scrollTop = stickyContainer.scrollTop;
if (scrollTop > 40) {
stickyElement.classList.add('fixed', 'shadow-lg');
stickyElement.style.top = '20px';
stickyElement.style.zIndex = '40';
} else {
stickyElement.classList.remove('fixed', 'shadow-lg');
stickyElement.style.top = '4px';
stickyElement.style.zIndex = '10';
}
});
});
</script>
</body>
</html>
