###前提・実現したいこと
positionの指定で子要素の画像を自由に動かしたい
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="shortcut icon" href="favicon.ico" type="icon/logo.jpg"> <link rel="apple-touch-icon" href="icon/logo.jpg"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> <title>農業サポートセンター</title> </head> <body> <div class="mainVisual"> <div class="concept"> <img src="img/concept_img1.png" class="cancept__img1"> <img src="img/concept.png" class="cancept__img2"> <img src="img/concept_img2.png" class="cancept__img3"> </div> </div> </body>
css
1.mainVisual { 2 background-image: url(../img/main.jpg); 3 width: 85%; 4 height: 87vh; 5 position: absolute; 6 background-position: center center; 7 background-repeat: no-repeat; 8 background-size: cover; 9} 10 11.cancept__img1 { 12 position: relative; 13 top: 1%; 14 left: 1%; 15} 16.cancept__img2 { 17 position: relative; 18 top: 1%; 19 left: 1%; 20} 21.cancept__img3 { 22 position: relative; 23 top: 1%; 24 left: 1%; 25}
回答1件
あなたの回答
tips
プレビュー