HTML,CSS,java script　スライドショー　CSSのコードについて

引用テキスト### 前提・実現したいこと

HTML,CSS,java scriptを使用してのスライドショーの学習中。
コードは参考書に書いてあるのですが、CSSのコードでどうして、
このコードになるかわかりません。
.slider {
position:relative;
width: 640px;
height: 480px;
margin: 0 auto
}
position:relative;の部分です。

position:relative;
top:100px;
left:300px; のような書き方ならわかるのですが、
position:relativeだけだと場所の移動はないと思うのですが？

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

.slider {
position:relative;
width: 640px;
height: 480px;
margin: 0 auto
}

HTML,CSS,java script
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>スライダー</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div class="slider">
	<ul class="slider-inner">
    </ul>
	<ul class="nav">
    </ul>
	<p id="arrow-prev" class="arrow">←</p>
	<p id="arrow-next" class="arrow">→</p>
</div>
<script src="js/index.js"></script>
</body>
</html>



var imgList=[
    "images/img01.jpg",
    "images/img02.jpg",
    "images/img03.jpg",
    "images/img04.jpg"
    
];


for(var i=0;i<imgList.length;i++){
    
    var slide=document.createElement("li");
    slide.innerHTML="<img src='"+imgList[i]+"'>";
    document.getElementsByClassName("slider-inner")[0].appendChild(slide);
    
   var nav=document.createElement("li");
    nav.setAttribute("data-nav-index",i);
    nav.style.backgroundImage="url("+imgList[i]+")";
    nav.style.width=100/imgList.length+"%";
    document.getElementsByClassName("nav")[0].appendChild(nav);
}


var imageslide=document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li");
var dotnav=document.getElementsByClassName("nav")[0].getElementsByTagName("li");

var nowIndex=0;

imageslide[nowIndex].classList.add("show");
dotnav[nowIndex].classList.add("current");


var ischanging=false;

var setTimer;

var length=imgList.length-1;

function sliderslide(val){
    if(ischanging===true){
      return false;
       }
    ischanging=true;
    
    imageslide[nowIndex].classList.remove("show");
    dotnav[nowIndex].classList.remove("current");
    
    nowIndex=val;
    
    imageslide[nowIndex].classList.add("show");
    dotnav[nowIndex].classList.add("current");
    
    setTimer=setTimeout(function(){
        ischanging=false;
    },600);
}


document.getElementById("arrow-prev").addEventListener("click",function(){
    var index=nowIndex-1;
    if(index<0){
       index=length;
       }
    sliderslide(index);
},false);

document.getElementById("arrow-next").addEventListener("click",function(){
    
    var index=nowIndex+1;
    if(index>length){
   index=0;
       }
    sliderslide(index);
},false);

for(var i=0;i<imgList.length;i++){
    
    dotnav[i].addEventListener("click",function(){
        var index=Number(this.getAttribute("data-nav-index"));
        sliderslide(index);
    },false);
    
}






.slider {
    position:relative;
    width: 640px;
    height: 480px;
    margin: 0 auto
}

.slider .slider-inner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.slider .slider-inner li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 600ms;
    transition: all 600ms;
    pointer-events: none
}

.slider .slider-inner li.show {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 1;
    pointer-events: auto
}

.slider .nav {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-size: 0
}

.slider .nav li {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border-radius: 15px;
    background: #ddd;
    cursor: pointer;
    -webkit-transition: background 400ms;
    transition: background 400ms
}

.slider .nav li:hover {
    background: #aaa
}

.slider .nav li.current {
    background: #aaa
}

.slider .arrow {
    position: absolute;
    top: 50%;
    font-size: 20px;
    cursor: pointer;
    width: 20px;
    height: 40px;
    background: #000;
    color: #fff;
    line-height: 40px;
    padding: 5px;
    -webkit-transition: opacity 400ms;
    transition: opacity 400ms
}

.slider .arrow:hover {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
}

.slider .arrow#arrow-prev {
    left: 0;
    -webkit-transform: translate(-100%,-50%);
    transform: translate(-100%,-50%)
}

.slider .arrow#arrow-next {
    right: 0;
    -webkit-transform: translate(100%,-50%);
    transform: translate(100%,-50%)
}```````````````> ここに言語を入力
ここに言語を入力

ここに言語を入力

ここに言語を入力

ここに言語を入力

コード


### 試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。
### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

エラーメッセージ


### 該当のソースコード

```ここに言語名を入力
ソースコード

HTML,CSS,java script

試したこと

ここに問題に対して試したことを記載してください。

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

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

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

回答1件

ベストアンサー

position:relativeだけだと場所の移動はないと思うのですが？

たしかに.sliderの移動は無いですね。

でも、positionをrelativeにする狙いは別のところにあるんだと思います。その狙いとは、.sliderの子孫要素の中にposition:absoluteな要素があった場合、そいつの位置を、.sliderの位置を基点にして相対的に決めたい、ということです。うーん、文章、分かりにくいかな……。

例を挙げると、.sliderの小要素に矢印ボタン(#arrow-prev)があり、positionがabsoluteになってますね。で、.sliderのpositionをrelativeにしておけば、矢印ボタンのtopやleft, bottom, rightは、.sliderのボックスに対する相対座標として解釈してもらえるんです。