fadethisでposition:absoluteが適用されないこと

Question

列1	列2	列3
		### 前提・実現したいこと
htmlcssの質問です。jpuery のfadethisを使って横からフェードインしてくる画像を作りたいです。
### 発生している問題・エラーメッセージ
画像に対してposition:absoluteが適用されず、画像の位置を指定できない。

該当のソースコード

<img class="animilk1 slide-left" data-plugin-options='{"speed":2000}' src="https://www.yotsuba.co.jp/wordpress/wp-content/uploads/2015/10/img_01_tokusen.png">

.animilk1 {
width: 30%;
position: absolute;
top: 15%;
}

ソースコード
```<div id="main3">
  <h3>日本のご当地牛乳</h3>
  <img class="main3i" src="https://assets.st-note.com/production/uploads/images/16171176/rectangle_large_type_2_87bb94e10cf6f74d469fa1f694280fef.jpeg?fit=bounds&format=jpeg&quality=45&width=960">
  <img class="animilk1 slide-left" data-plugin-options='{"speed":2000}' src="https://www.yotsuba.co.jp/wordpress/wp-content/uploads/2015/10/img_01_tokusen.png">
</div>
#main3 {
  width: 100%;
  margin: 0;
  position: relative;
}

#main3 h3 {
  margin: 0;
  position: absolute;
  top: 5%;
  left: 10%;
  font-size: 30px;
  text-align: center;
  background: skyblue;
  border-radius: 50%;
  padding: 10px;
  opacity: 0.7;
}

.main3i {
  width: 100%;
}
  
 .animilk1 {
    width: 30%;
    position: absolute;
    top: 15%;
  }

### 試したこと
デベロッパーツールで確認。fadethis、positionが適用されないで検索

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

ご提示のコードでは問題が再現しませんでした。

fadethisとはこれですか？
https://github.com/lwiesel/jquery-fadethis
demoページが死んでいるようですが……

[Lhankor_Mhy]

あ、すみません、動くページを見つけました。

Answer 1

こんにちは。

jQuery FadeThis

こちらのサイトを拝見したところ、class="slide-left"とした要素に、position: relativeがインラインCSSで書かれていました。

ですので、別の要素でラップして、ラップした要素にスタイルを当てるのがいいのではないかな、と思いました。

Comments

[konisi721]

回答ありがとうございます。アドバイスをいただいた通りにしたらできました。
ありがとうございました。