절대 위치가 지정된 Iframe이 고정 된 바닥 글을 포함합니다.

여기 내가 수행하려고하는 것이 있습니다. 배경 위에 iframe 요소를 놓고 싶습니다. 나는 다음과 같이이 달성하는 데 사용절대 위치가 지정된 Iframe이 고정 된 바닥 글을 포함합니다.

<div id="container"> 
    <img src="images/videoframe.png" id="img1" /> 
    <iframe id="img2" width="370" height="209" src="http://www.youtube-nocookie.com/embed/BWW7te-P5Ak?rel=0" frameborder="0" allowfullscreen></iframe> 
</div>

는 CSS :

#container { 
    position:relative; 
} 

#img2 { 
    position: absolute; 
    left: 50px; 
    top: 29px;

내가 관리가 완벽하게 작동하도록하기 위해 다음과 같이

내가 사용하는 HTML이다. 내 문제는 ... 고정 된 꼬리말이 있고 iframe (iframe 만 해당)이 겹쳐서 고정 바닥 글의 일부를 덮고 있습니다. 다음과 같이 고정 된 바닥 글

내 HTML은 다음과 같습니다 고정 바닥 글

<div class="floatingfooter"> 
    <a href="http://www.facebook.com/TraumaSlaveSC" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FacebookIcon','','images/socialmedia/Stone-FaceBook2.png',1)"><img src="images/socialmedia/Stone-FaceBook.png" alt="Like Us on Facebook" name="FacebookIcon" width="86" height="85" border="0" class="centerimage" id="FacebookIcon" /></a> 

<a href="http://www.facebook.com/TraumaSlaveSC" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MySpaceIcon','','images/socialmedia/Stone-MySpace2.png',0)"><img src="images/socialmedia/Stone-MySpace.png" alt="Add Us on MySpace" name="MySpaceIcon" width="85" height="85" border="0" class="centerimage" id="MySpaceIcon" /></a> 



<a href="http://www.reverbnation.com/traumaslave" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ReverbNationIcon','','images/socialmedia/Stone-Reverb2.png',1)"><img src="images/socialmedia/Stone-Reverb.png" alt="Listen to us on Reverbnation" name="ReverbNationIcon" width="85" height="85" border="0" class="centerimage" id="ReverbNationIcon" /></a> 
<a href="http://twitter.com/traumaslavefan" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TwitterIcon','','images/socialmedia/Stone-Twitter2.png',1)"><img src="images/socialmedia/Stone-Twitter.png" alt="Follow Us on Twitter" name="TwitterIcon" width="86" height="85" border="0" class="centerimage" id="TwitterIcon" /></a><a href="http://www.youtube.com/traumaslave" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YouTubeIcon','','images/socialmedia/Stone-YouTube2.png',1)"><img src="images/socialmedia/Stone-YouTube.png" alt="Watch Our YouTube Channel" name="YouTubeIcon" width="85" height="85" border="0" class="centerimage" id="YouTubeIcon" /></a></div>

내 CSS는 여기에 있습니다 :

.floatingfooter { 
    color: #ffffff; 
    font-size: 14px; 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    background-color: #7A6D50; 
    text-align: center; 
    position:fixed; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 105px; 
    z-index: 100000; 
    vertical-align: middle; 
    padding-top: 20px; 
}

코드가 현재 게시 된 웹 사이트는 www.traumaslave입니다. co.kr에서

이것은 정말로 저를 곤란하게 만들었습니다.

초기 설계 단계에 있기 때문에 코딩이 거칠다는 것을 이해합니다. 나는 그것을 청소해야합니다. 그러나, 나는 고정 된 바닥 글에서 iframe을 스크롤하는 방법을

을 알고 싶습니다

또는 누구든지이 문제를 회피하는 깔끔한 배경에 iframe을 퍼팅에 대한 더 좋은 생각이있는 경우

또는

문제가 iframe이 자체 인 경우

, 누군가가 iframe을 포함하지 않으며 여전히 배경에 비디오를 포함 코딩 수 유튜브 비디오를 포함에 대한 해결책을 알고 있다면.

감사합니다.

제니퍼

출처

2012-05-29 Jennifer Wreckingballs Eckert

? W 모드 = 투명 및 z 인덱스입니다. 아무것도 작동하지 않습니다. –

나는 내가 여전히 응답이없는 믿을 수 없어. :(이 실망입니다. 글쎄, 난 내가 거 같아요 독립적으로 다른 솔루션을 시도하십시오. 비디오를 실행할 일부 j를 찾을 수도 있습니다. –

그래서 정적 바닥 글을 정적 사이드 바로 변경했습니다. 그것은 더 잘 보였고, 중복 요소에 대해 걱정할 필요가 없습니다. 나는 여전히 매우 실망스럽고 응답을받지 못했습니다. 만약 누군가가이 같은 문제를 겪고 있고이 게시물을 올려 본다면, 사이드 바를 사용해 보라고 권하고 싶습니다. 내 탐색 창이 수평으로되어있어 기발한 것처럼 보이지 않으므로 저에게 좋았습니다.

해피 코딩! 내가 시도

젠도

출처

2012-06-02 02:58:30

절대 위치가 지정된 Iframe이 고정 된 바닥 글을 포함합니다.

답변

관련 문제