为什么要使用position属性？

在网页设计中，我们经常需要控制盒子的位置和层次关系。position属性可以帮助我们控制盒子在页面中的位置和层次关系，进而实现网页布局的细节控制。

什么是position属性？

position属性是CSS中用于控制盒子位置的属性。它的值可以是static、relative、absolute、fixed和sticky。其中，static是默认值，不会对盒子的位置产生影响。relative、absolute和fixed则根据盒子的祖先元素或页面定位盒子的位置。

如何使用position属性让父盒子显示在子盒子外？

为了达到“父盒子显示在子盒子外”的效果，我们可以使用position属性的relative或absolute值。

步骤

1、为父盒子和子盒子分别设置一个类名

我们需要为要控制的盒子设置类名，例如

.parentbox {
    /* 父盒子的样式 */
}
.childbox {
    /* 子盒子的样式 */
}

2、设置父盒子和子盒子的position属性

我们需要为父盒子和子盒子分别设置position属性，并将父盒子的z-index属性设置为一个比子盒子更高的值。

.parentbox {
    position: relative; /* 或 absolute */
    z-index: 1;
}
.childbox {
    position: absolute; /* 或 relative */
    z-index: 2;
}

3、运用CSS布局盒子的其他属性

我们还可以通过设置其他CSS属性来调整父盒子和子盒子的大小、位置和样式，从而实现更加精细的布局效果。

如何在网页中使用Unsplash API获取图片？

Unsplash API是一个提供高质量免费照片的图片库，我们可以在网页中使用它来获取图片。具体操作如下：

步骤

1、注册Unsplash账号并获取API key

在Unsplash网站上注册一个账号，并在开发者中心中申请一个Access key，用于在网页中调用API。

2、在网页中使用API获取图片

我们可以在网页中使用以下代码来获取一张大小为600x337的随机图片：

<img src="https://source.unsplash.com/600x337/?nature">

其中，nature表示图片的类型，我们可以将其替换为其他类型来获取不同种类的图片。

结尾

使用position属性让父盒子显示在子盒子外可以帮助我们实现更加精细的网页布局。同时，Unsplash API提供方便快捷的方式获取高质量免费照片，可以帮助我们打造更加美观的网页。

如果你有任何问题或者建议，欢迎在下面留言区中与我们交流。

感谢阅读！