任务 1
要完成此任务，请将 class 为 target 的元素定位到容器的顶部和右侧，该容器有一个 5px 的灰色边框。
您的最终结果应如下面的图片所示
奖励问题：您能将目标元素改变为显示在文本下方吗？
html
<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>
css
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.container {
padding: 0.5em;
border: 5px solid #cccccc;
}
.target {
width: 150px;
height: 150px;
border-radius: 5px;
background-color: #663398;
padding: 1em;
color: white;
}
.container {
/* Add styles here */
}
.target {
/* Add styles here */
}
点击此处显示解决方案
这需要 position: relative 和 position: absolute，以及理解它们在相对定位创建新定位上下文方面的关系。一个可能出现的问题是，您将 position: absolute 添加到子元素而未将 position: relative 应用到容器。在这种情况下，目标元素将根据视口进行定位。
css
.container {
position: relative;
}
.target {
position: absolute;
top: 0;
right: 0;
}
对于奖励问题，您需要为目标元素添加一个负数的 z-index，例如 z-index: -2。
任务 2
在此任务中，如果您滚动下面的示例框，侧边栏会随内容一起滚动。我们希望您更新代码，以便侧边栏（<div class="sidebar">）保持在原位，只有内容会滚动。
html
<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>
css
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.container {
height: 400px;
padding: 0.5em;
border: 5px solid #cccccc;
overflow: auto;
}
.sidebar {
color: white;
background-color: #663398;
padding: 1em;
float: left;
width: 150px;
}
.content {
padding: 1em;
margin-left: 160px;
}
.container {
/* Add styles here */
}
.sidebar {
/* Add styles here */
}
点击此处显示解决方案
我们正在使用一个与学习材料中的示例略有不同的示例来测试您对 position: fixed 的理解。
css
.sidebar {
position: fixed;
}