일부 CSS.
Z-색인
z-index is a property that is used to add another dimension to the app, as the name suggests - (z). The viewport has width and the height but z-index gives it a sense of depth.
For length, we have relative as well as absolute units - px that can define how many pixels should the length cover but in case of depth it is impossible to define it in terms of pixels, for obvious reasons, so we define it relatively. Relative here means relative to each other i.e, whether we want a particular element to be above or below the other element.
This relation is defined by assigning absolute digit as a value to the z-index property. Even though these digits are absolute, they are used relative to each other. But what exactly do I mean by each other.
스택 컨텍스트
Here comes the concept of stacking context. What is stacking context? Upon bifurcating the words, we get stacking and context. Stacking means placing things on top of other things (you must have used stack as a data structure) and context is a particular setting or an environment. We can create several stacks of HTML elements on the same page, each of them having their own context. The z-index of an element would hold its meaning or value only in the context that this particular element is in. Here is the code to get a clearer picture.
<body>
<div id="parent1"></div>
<div id="parent2"></div>
</body>
/* for now, focus only on z-index */
#parent1 {
position: absolute;
z-index: 1;
width: 200px;
height: 200px;
background-color: lightblue;
}
#parent2 {
position: absolute;
z-index: 2;
top: 100px;
width: 200px;
height: 200px;
background-color: lightcoral;
}
보시다시피 본문 내부에
parent1 및 parent2을 두 개의 하위 노드로 사용하여 스택 컨텍스트를 만들었습니다. 각각의 z-index는 parent2 이 parent1 과 겹치는 결과를 제공합니다.이제
parent2 안에 중첩된 또 다른 쌓임 컨텍스트를 만들어 보겠습니다.<div id="parent1"></div>
<div id="parent2">
<div id="child1"></div>
<div id="child2"></div>
</div>
#parent2 > #child1 {
position: absolute;
top: 0;
z-index: -1; /* negative z-index */
width: 50px;
height: 50px;
background-color: lightgreen;
}
/* no z-index */
#parent2 > #child2 {
position: absolute;
top: 0;
width: 50px;
height: 50px;
background-color: lightyellow;
}
여기서는
child2의 z-index가 -1이기 때문에 child1만 표시됩니다. 이제 코드만 보면 음수 Z-색인 때문에 child1 이 모든 요소의 맨 아래에 있을 것이라고 생각할 수 있지만 -1은 parent2 의 스태킹 컨텍스트 내에서만 의미가 있기 때문에 parent2 아래로 가지 않습니다.쌓이는 순서
Stacking order is the order in which the elements are placed in a context. As you saw in the above example, browser determined the order of elements based on their z-index.
One rule is important to get a better grasp on stacking order. Going from the bottom to top, this is how elements are stacked( excluding the float elements which deserve a separate blog). Positioned element with negative z-index, un-positioned element, positioned element with no z-index and positioned element with positive z-index.
/* unpositioned element */
div#one {
background-color: lightblue;
}
/* positioned with -ve z-index */
div#two {
position: absolute;
top: 15px;
z-index: -1;
background-color: lightcoral;
}
/* positioned with no z-index */
div#three {
position: absolute;
top: 0px;
background-color: lightgreen;
}
/* positioned with +ve z-index */
div#four {
position: absolute;
top: -10px;
z-index: 1;
background-color: lightgrey;
}
오버플로우 및 끈적임
Here is the scenario,
<div id="app">
<div id="menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
#menu {
height: 200px;
width: 200px;
position: sticky;
top: 0;
overflow-y: auto;
background-color: lightgreen;
}
예상되는 동작은
top: 0 일 때 메뉴가 페이지 상단에 고정되어야 한다는 것입니다. 그러나 여기서는 그렇지 않습니다. 사이드 메뉴를 만들 때이 문제에 직면했습니다. 내가 처음 깨달은 것은 overflow이 작동하려면 높이를 지정해야 한다는 것입니다. 두 번째 깨달음은 스티키와 오버플로가 같은 요소에서 함께 갈 수 없다는 것입니다.이제 한 가지를 바꿉니다.
#app {
position: sticky; /*sticky moved to parent element*/
top: 0;
}
#menu {
height: 200px;
width: 200px;
overflow-y: auto;
background-color: lightgreen;
}
메뉴의 부모에게
sticky 위치를 부여했으며 이제 제대로 작동합니다.성배 레이아웃
This layout has header, main content, aside and footer. One way to achieve this layout using grids is to divide the page in certain columns and rows using grid-template-columns or grid-template-rows . Then, for each of the above mentioned elements, we assign them a cell or an area using grid-column-start and grid-column-end and similarly for rows.
To make it responsive, we'll have to change their cells/area positions in the grid using the same properties mentioned before.
An alternative to this is grid areas. Firstly, here is how the layout looks.
작은 화면에서는 이렇게 변경됩니다.
이제 코드를 살펴보겠습니다.
<body>
<header></header>
<aside id="left"></aside>
<aside id="right"></aside>
<main></main>
<footer></footer>
</body>
body {
display: grid;
grid-template-areas:
"header header header"
"aleft main aright"
"footer footer footer";
/*no. of strings defines the rows and no. of words
in each string defines the columns*/
height: 100vh;
}
header {
grid-area: header;
background-color: lightpink;
}
aside#left {
grid-area: aleft;
background-color: lightgreen;
}
main {
grid-area: main;
background-color: lightyellow;
}
aside#right {
grid-area: aright;
background-color: lightgreen;
}
footer {
grid-area: footer;
background-color: lightblue;
}
grid-template-areas은 일련의 문자열을 허용하는 속성입니다. 이 문자열 세트는 레이아웃의 청사진을 나타냅니다.이 문자열에 있는 단어는 각 자식 요소에 대한
grid-area 속성 값으로 정의됩니다. 예를 들어 코드에서 header은 grid-area 요소에 대한 <header></header>임을 알 수 있습니다.이제 응답성을 추가하려면
grid-template-areas 에 정의된 문자열을 변경하기만 하면 됩니다. 코드는 다음과 같습니다.body {
grid-template-areas:
"header"
"aleft"
"main"
"aright"
"footer";
}
이것들은 내가 여러분 모두와 공유하고 싶었던 것들 중 일부였습니다. 도움이 되길 바랍니다. 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(일부 CSS.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/foolhardy21/some-of-the-css-1ikj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
