CODEBASE_FRONTEND Telegram 733
⚙️ Что такое свойство z-index в CSS и зачем оно используется?

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
.box {
position: absolute;
width: 200px;
height: 100px;
color: white;
padding: 10px;
}

.box1 {
background: #888;
top: 50px;
left: 50px;
z-index: 1;
}

.box2 {
background: #e74c3c;
top: 80px;
left: 80px;
z-index: 2;
}
</style>


🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM



tgoop.com/codebase_frontend/733
Create:
Last Update:

⚙️ Что такое свойство z-index в CSS и зачем оно используется?

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
.box {
position: absolute;
width: 200px;
height: 100px;
color: white;
padding: 10px;
}

.box1 {
background: #888;
top: 50px;
left: 50px;
z-index: 1;
}

.box2 {
background: #e74c3c;
top: 80px;
left: 80px;
z-index: 2;
}
</style>


🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS

BY CodeBase | Frontend


Share with your friend now:
tgoop.com/codebase_frontend/733

View MORE
Open in Telegram


Telegram News

Date: |

Content is editable within two days of publishing Write your hashtags in the language of your target audience. Telegram message that reads: "Bear Market Screaming Therapy Group. You are only allowed to send screaming voice notes. Everything else = BAN. Text pics, videos, stickers, gif = BAN. Anything other than screaming = BAN. You think you are smart = BAN. While the character limit is 255, try to fit into 200 characters. This way, users will be able to take in your text fast and efficiently. Reveal the essence of your channel and provide contact information. For example, you can add a bot name, link to your pricing plans, etc. Private channels are only accessible to subscribers and don’t appear in public searches. To join a private channel, you need to receive a link from the owner (administrator). A private channel is an excellent solution for companies and teams. You can also use this type of channel to write down personal notes, reflections, etc. By the way, you can make your private channel public at any moment.
from us


Telegram CodeBase | Frontend
FROM American