隐藏元素，如果它在父元素之外

Question

如果它的外部父母被隐藏，我想要这条鱼的部分。

这个鱼Css代码就是这个

.fish {
  width: 150px;
  height: 150px;
  position: absolute;
}

这是jQuery mini项目

Answer 1

只需向父母提供overflow: hidden; position: relative：

.parent {
  overflow: hidden;
  position: relative
}

<强>片断：

＆＃13;

＆＃13;

.parent {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  background: #ccf;
  border: 5px solid #900;
}
.parent img {
  left: 25%;
  top: 25%;
  position: absolute;
}

＆＃13;

<div class="parent">
  <img src="//placehold.it/100x50?text=Fish" />
</div>

＆＃13;

＆＃13;

＆＃13;

在没有给定样式的情况下退房：

＆＃13;

＆＃13;

.parent {
  width: 100px;
  height: 100px;
  background: #ccf;
  border: 5px solid #900;
  position: relative;
}
.parent img {
  left: 25%;
  top: 25%;
  position: absolute;
}

＆＃13;

<div class="parent">
  <img src="//placehold.it/100x50?text=Fish" />
</div>

＆＃13;

＆＃13;

＆＃13;

预览

在：

后：