position rerativeで画像を下に下げることができません

###前提・実現したいこと
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}

m.ts10806

2017/08/10 02:26

動作確認したブラウザを追記願います。

ryuji000

2017/08/10 03:06

google chromeです

行動規範の内容に同意します

回答1件

ベストアンサー

下記のように変更すると自由に動かせると思います。

css
1.mainVisual {
2    background-image: url(../img/main.jpg);
3    width: 85%;
4    height: 87vh;
5    position: absolute;//relative;
6    background-position: center center;
7    background-repeat: no-repeat;
8    background-size: cover;
9}
10
11.cancept__img1 {
12    position: relative;//absolute;
13    top: 1%;
14    left: 1%;
15} 
16.cancept__img2 {
17    position: relative;//absolute;
18    top: 1%;
19    left: 1%;
20} 
21.cancept__img3 {
22    position: relative;//absolute;
23    top: 1%;
24    left: 1%;
25}

投稿2017/08/10 02:27

LanHma

総合スコア192

ryuji000

2017/08/10 03:08

absoluteとrelativeが逆だったってことですか?

LanHma

2017/08/10 03:44

親要素をどれにしたいのかで変わります。質問を見る限り、mainVisualを基点にimgを自由に動かしたいと見受けられた為、上記の回答を行いました。(違っていたらごめんなさい) 正確には position: relative; 単体でも自由に動かす事は可能です。ただ、基点がその場からになります。 position: absolute; こちらは親要素を決めない場合、基点がwindowになります。

ryuji000

2017/08/11 00:26

詳しい説明ありがとうございます。また何かありましたらよろしくおねがいします

行動規範の内容に同意します