首先,要明确的是,CSS 定位元素的方式有两种:position: absolute
和 position: relative
。position: absolute
表示元素相对于父元素(offsetParent)定位,而 position: relative
表示元素相对于自己原来的位置(即相对于元素本身)定位。
使用 position: absolute
将 iframe 元素绝对定位在父元素(即 body
元素)中,可以使用以下 CSS 代码来实现:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
在上面的代码中,body
元素设置了 display: flex
,使其成为 flex 容器。justify-content: center
和 align-items: center
使其在垂直和水平方向上居中。height: 100vh
表示占据视口高度,margin: 0
移除了浏览器默认的 margin。background-color: #f0f0f0
表示背景颜色为无色。
iframe
元素使用 position: absolute
,将其相对于 body
元素绝对定位。top: 0; left: 0; width: 100%; height: 100%
表示将 iframe 元素在水平和垂直方向上居中,并且完全占据父元素的空间。border: none
移除了 iframe 元素的边框。
需要注意的是,在 HTML 中使用 iframe
元素时,如果 iframe 元素设置了 position: absolute
,必须同时设置 top
、left
、width
和 height
属性,否则可能会出现布局问题。
因此,上面的 CSS 代码可以使得 iframe 中的正文背景颜色变为红色。
领取专属 10元无门槛券
手把手带您无忧上云