باکس ثابت

Question

با استفاده از CSS کلاس fix را استایل دهی کنید تا بصورت ثابت در گوشه پایین سمت چپ صفحه (با فاصله 10 پیکسل) قرار گیرد و در صورت اسکرول کاربر، موقعیت آن تغییر نکند.

Answer

.fix { position: fixed; bottom: 10px; left: 10px; width: 5%; height: 5vw; margin: 0; background: black;}

Answer

<!DOCTYPE html> <html dir=&#34;rtl&#34;> <head> <meta charset=&#34;UTF-8&#34;> <meta name=&#34;viewport&#34;content=&#34;width=device.width, init...

Answer

<!DOCTYPE html> <html lang=&#34;en&#34;;> <head> <meta charset=&#34;UTF-8&#34;> <meta name=&#34;viewport &#34; content=&#34;width=device-width,in...

Answer

<!DOCTYPE html> <html lang=&#34;fa&#34;> <head> <meta charset=&#34;UTF-8&#34;> <meta name=&#34;viewport&#34; content=&#34;width=device-width, ini...

Answer

.fix { position: fixed; /* موقعیت ثابت */ bottom: 10px; /* فاصله 10 پیکسل از پایین */ left: 10px; /* فاصله 10 پیکسل ا...

Answer

<!DOCTYPE html> <html> <head> <style> div.fix{ position:fixed; bottom:10px; left:10px; } </style> </head> <body> <div...

Answer

.fix{ pisition: fixed; left: 10px; bottom: 10px; }

	<!DOCTYPE html>
	<html dir="rtl">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device.width, initial-scale=1.0">
	<title> باکس موقعیت ثابت</title>
	</head>
	<style>
	.fix {
	width: 200px;
	height: 200px;
	position: fixed;
	bottom: 10px;
	left: 10px;
	background-color: rgba(189, 12, 12, 0.8);
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	z-index: 1000; /
	}
	</style>
	<body>
	<div class="fix"></div>

	</body>
	</html>

	<!DOCTYPE html>
	<html lang="fa">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>مثال CSS ثابت</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="content">
	<h1>محتوای صفحه</h1>
	<p>این یک متن آزمایشی است. برای مشاهده اثر اسکرول، به پایین صفحه بروید.</p>
	<div style="height: 1500px;"></div> <!-- برای ایجاد فضای اسکرول -->
	</div>
	<div class="fix">
	این یک عنصر ثابت در گوشه پایین سمت چپ است
	</div>
	</body>
	</html>

	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	}

	.content {
	padding: 20px;
	}

	.fix {
	position: fixed; /* موقعیت ثابت */
	bottom: 10px; /* فاصله از پایین */
	left: 10px; /* فاصله از چپ */
	background-color: rgba(0, 0, 0, 0.7); /* رنگ پس‌زمینه با شفافیت */
	color: white; /* رنگ متن */
	padding: 10px; /* فاصله داخلی */
	border-radius: 5px; /* گوشه‌های گرد */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* سایه */
	}

	.fix {
	position: fixed; /* موقعیت ثابت */
	bottom: 10px; /* فاصله 10 پیکسل از پایین */
	left: 10px; /* فاصله 10 پیکسل از سمت چپ */
	background-color: rgba(0, 0, 0, 0.7); /* پس‌زمینه نیمه شفاف */
	color: white; /* رنگ متن سفید */
	padding: 10px; /* padding داخلی */
	border-radius: 5px; /* گوشه‌های گرد */
	z-index: 1000; /* اطمینان از اینکه در بالای سایر عناصر قرار گیرد */
	}

تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

باکس ثابت

7 جواب

ارسال جواب

راهنمای ارسال جواب 👇

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی

شمارنده حروف رشته

اعتبارسنجی ایمیل

پیدا کردن ضریب اعداد

	<!DOCTYPE html>
	<html lang="en";>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport " content="width=device-width,intial-scale=1.0">
	<title>fixed box</title>
	<style>
	.fix{
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 5%;
	height: 5vw;
	margin: 0;
	background: black;

	}
	</style>
	</head>
	<body>
	<div class="fix"></div>
	</body>
	</html>

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div.fix{
	position:fixed;
	bottom:10px;
	left:10px;
	}
	</style>
	</head>

	<body>
	<div class="fix">Hi Developers In CodeBezan!</div>
	<p>Start</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>End</p>
	</body>
	</html>

باکس ثابت

7 جواب

ارسال جواب

راهنمای ارسال جواب 👇

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی

شمارنده حروف رشته

اعتبارسنجی ایمیل

پیدا کردن ضریب اعداد

حساب کاربری

نمیتونم این تمرین رو حل کنم 😞