首页 > 试题广场 >

分析以下代码 ...

[单选题]

分析以下代码

<div class="container">
    <div class="box"></div>
</div>

CSS：

.container {
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #f5f5f5;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:
    200px;
    height: 200px;
    background-color: #ddd;
}

下列哪个是 box 元素的位置

相对于 .container 元素左上角偏移150px

相对于 .container 元素右下角偏移250px

相对于浏览器窗口左上角偏移150px

相对于浏览器窗口右下角偏移250px

查看正确选项

牛客785225794号

代码可知：一个父元素一个子元素；(定位)子绝父相，子元素相对于父元素位置 (所以排除相对于浏览器选项的CD选项)：top：50%，left：50%，即(.box)子元素左上角位置为（top:150,left:250），又因transform: translate(-50%, -50%);，子元素上移、左移自身宽高的一半(100,100)，所以至此，子元素在父元素中居中显示（top:150-100=50px, left:250-100=150px），所以相对于 .container 元素左上角偏移150px

发表于 2025-08-15 15:44:09 回复(0)