Question

假设我有一个父块级元素，如下所示：

#parent {
 width: 100px;
 height: 100px;
}

和这样的子元素：

#child {
 width: 100px;
 height: 100px;
 margin-left: 50px;
 margin-top: 50px;
}

并且元素嵌入如下：

<div id="parent">
  <div id="child>
  </div>
</div>

我想创建一个效果，其中只有子div的左上角部分显示在右下角。儿童div的3个角落完全消失了。我怎样才能使用css实现这一目标？

Answer 1

您是否尝试使用溢出：隐藏在#parent div上并结合位置值？

这样的东西？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
#parent {
 width: 100px;
 height: 100px; 
 background-color:#FFCCFF;
 overflow:hidden;
 position:relative;
}
#child {
 width: 100px;
 height: 100px;
 position:absolute;
 top:50px;
 left:50px;
 background-color:#99CC99;
}
</style>

</head>

<body>
    <div id="parent">
        <p>text</p>
    <div id="child">
            <p>text</p>
    </div>
</div>

</body>
</html>

如何将元素的某些部分隐藏在另一个元素的顶部

1 个答案: