Prompt Detail:
สำหรับการให้ nav-bar อยู่กับที่โดยใช้ CSS position: fixed สามารถทำได้โดยอ้างอิงตำแหน่งของ element ดังนี้:
html<!DOCTYPE html>
<html>
<head>
<style>
/* กำหนดสีพื้นหลังของ nav-bar */
.nav-bar {
background-color: #333;
color: #fff;
height: 50px;
/* กำหนดความกว้างเท่ากับความกว้างของหน้าจอ */
width: 100%;
/* ให้ nav-bar ติดตัวเมื่อเลื่อนหน้าจอ */
position: fixed;
/* กำหนดตำแหน่งของ nav-bar ด้านบน */
top: 0;
/* ให้ข้อความอยู่ตรงกลางของ nav-bar */
text-align: center;
/* กำหนดขนาดตัวอักษรและขนาดตัวอักษร */
font-size: 18px;
line-height: 50px;
}
/* กำหนดสีพื้นหลังของ content */
.content {
background-color: #ddd;
/* กำหนดระยะห่างด้านบนเท่ากับความสูงของ nav-bar */
padding-top: 50px;
}
</style>
</head>
<body>
<div class="nav-bar">Navigation Bar</div>
<div class="content">
<h1>Content Title</h1>
<p>Content Text</p>
</div>
</body>
</html>
สังเกตว่าเราให้ค่า top: 0 เพื่อให้ nav-bar ติดกับด้านบนของหน้าจอ และให้ค่า padding-top: 50px ให้กับเนื้อหาเพื่อให้เริ่มต้นข้างในของ content หลังจาก nav-bar.
Add a comment
Add to Chrome - It's free
Add to Firefox - It's free
Add to Edge - It's free