절대 위치 이미지를 표시하는 데 오류가있는 이유는 무엇입니까?

여기 내 CSS를절대 위치 이미지를 표시하는 데 오류가있는 이유는 무엇입니까?

.arrow_l, .arrow_r { 
    -moz-transition: opacity 0.5s ease 0s; 
    border-radius: 5px 5px 5px 5px; 
    box-shadow: 0 0 2px #aeaeae; 
    height: 60px; 
    margin-top: 80px; 
    position: absolute; 
    width: 36px; 
    opacity:.75; 
} 
.arrow_l { 
    background: url("../images/arrow.png") no-repeat 10px center,red; 
    background-size: 116% auto; 
} 
.arrow_r { 
    background: url("../images/arrow.png") no-repeat -15px center,red; 
    background-size: 116% auto; 
    margin-left:-36px;

}

enter image description here

내용은 CSS로 래퍼 내부입니다 : 오른쪽 화살표가 아래에가는 이유는 그것을 받고 있지 않다

.wrapper { 
    display: inline-block; 
    padding: 12px; 
}

어떻게 행을 수정할 수 있습니까?

출처

2012-10-27 Rachit Mishra

http://jsfiddle.net에서 데모를 게시하십시오. – Blender

http://jsfiddle.net/rachit_rm/KgNbN/embedded/result/ –

jsfiddle에 전체 문서를 붙여 넣으면 다른 문서의 본문 요소 안에 문서가 생겨서 끊어집니다. – Guffa

귀하의 JsFiddle은 문제를 복제하지 않지만 귀하의 코드와 여기에 게시 한 정보를 보면서 몇 가지 시도해 보시기 바랍니다.

첫째 절대 위치 만 제대로 작동 부모 DIV의 위치가 상대적으로 설정되어있을 때, 당신이 지금 위치에 부모 사업부를 (내가 그것을 패널 불렀다 생각)를 설정하려고하지 않아도 : 상대;
당신은
```
<div class="arrow_l"></div> 
```

대신

사용해보십시오

.arrow_l { 
    background: url("../images/arrow.png") no-repeat 10px center,red; 
    background-size: 116% auto; 
    left:0px; 
    top:25px; 
} 
.arrow_r { 
    background: url("../images/arrow.png") no-repeat -15px center,red; 
    background-size: 116% auto; 
    margin-left:-36px; 
    right:0px; 
    top:25px; 
}

같은 시도 ... 절대 위치 항목으로 화살을 선언하고 실제로 위치하지 않은

<span class="arrow_l"></span>

왜 이런 짓을했는지 이해가 안되는데 특별한 이유가 있습니까?

희망이 있습니다. :)

출처

2012-10-28 09:51:36 Crin

나는 실제로 문제를 해결했다. 코드를 게시하겠습니다. –

절대 위치 이미지를 표시하는 데 오류가있는 이유는 무엇입니까?

답변

관련 문제