Task 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Position: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
width: 500px;
padding: 0.5em;
border: 5px solid #ccc;
position: relative;
}
.target {
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rgb(207,232,220);
padding: 1em;
position: absolute;
top: 0;
right: 0;
/* Additional question */
z-index: -1;
}
</style>
</head>
<body>
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.
</p>
<div class="target">Target</div>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
</body>
</html>
Task 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Position: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
width: 550px;
height: 400px;
padding: .5em;
border: 5px solid #ccc;
overflow: auto;
}
.sidebar {
background-color: rgb(207, 232, 220);
padding: 1em;
float: left;
width: 150px;
position: fixed;
}
.content {
padding: 1em;
margin-left: 160px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<p>
This is the sidebar. It should remain in position as the content scrolls.
</p>
</div>
<div class="content">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin
horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean
swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd
swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean
chickweed potato bell pepper artichoke.
</p>
</div>
</div>
</body>
</html>도움 받은 곳
https://github.com/mdn/css-examples/blob/main/learn/tasks/position/marking.md
'CSS > MDN 문제 풀이' 카테고리의 다른 글
| Test your skills: Responsive web design and media queries (0) | 2022.11.18 |
|---|---|
| Test your skills: Multicol (0) | 2022.11.17 |
| Test your skills: Floats (0) | 2022.11.15 |
| Test your skills: Grid (0) | 2022.11.15 |
| Test your skills: Flexbox (0) | 2022.11.14 |