Jump to content

Overflow hidden breaks position absolute


DarkxPunk
 Share

Recommended Posts

Hey there,

So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great!

To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it.

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Slideshow Test">
		<base href="">
		<title>Slideshow Test</title>
		<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/>
	</head>
	<body>
		<header></header>
		<section>
			
			<ul>
				<li>
					<a class="imageAnchor" href="#test-image-one">&#8226;</a>
					<a class="imageAnchor" href="#test-image-two">&#8226;</a>
					<a class="imageAnchor" href="#test-image-three">&#8226;</a>
					<a class="imageAnchor" href="#test-image-four">&#8226;</a>
				</li>
			</ul>
			<div class="gallary">
				<div class="container">
					<div id="test-image-one" class="image"></div>
					<div id="test-image-two" class="image"></div>
					<div id="test-image-three" class="image"></div>
					<div id="test-image-four" class="image"></div>
				</div>
			</div>
			
		</section>
		<footer></footer>
	</body>
</html>

CSS:

html,body {
	background-color: #363434;
}

a {
	color: red;
	text-decoration: none;
}

ul,li,.imageAnchor {
	list-style: none;
	display: inline-block;
	vertical-align: middle;
}

.gallary {
	width: 120px;
	height: 120px;
	position: relative;
	background-color: maroon;
	overflow: visible;
}

.gallary .container {
	width: 1000px;
	position: relative:
}

.image {
	width: 50px;
	height: 50px;
	margin: 35px;
	background-color: grey;
	display: inline-block;
	position: absolute;
	left: 120px;
	transition: left .1s linear;
}

#test-image-one {
	background-color: pink;
}

#test-image-two {
	background-color: green;
}

#test-image-three {
	background-color: purple;
}

#test-image-four {
	background-color: blue;
}


.image:target {
	left: 0;
}

Thanks for any help!

Edited by DarkxPunk
Link to comment
Share on other sites

Upon further investigation it seems to be a designed effect as outlined in box model (scratches head)

Does anyone have any ideas on another way to achieve the effect I'm looking for?

Thanks for the help.

Link to comment
Share on other sites

Yeah that is exactly where I stand... I have been researching like crazy trying to understand how some people have achieved this, except then we start getting into ill explained messy code and fancy animations when all I am trying to gather is the basics XD.

Any ideas or resources you can think of? My endgame is I wanna build a slideshow with forward and backwards arrows while targeting anchors and I keep running into the same brick wall, overflow hidden crams everything in, or starts causing a scroll!

Ill keep fighting.

Link to comment
Share on other sites

Soooo close but the return box seems quick of the mark  THIS version looks better

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Slideshow Test">
        <base href="">
        <title>Slideshow Test</title>
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
        <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/>
        <style>
            html,body {
                background-color: #363434;
            }

            a {
                color: red;
                text-decoration: none;
            }

            ul,li,.imageAnchor {
                list-style: none;
                display: inline-block;
                vertical-align: middle;
            }

            .gallary {
                width: 120px;
                height: 120px;
                position: relative;
                background-color: maroon;
                overflow: hidden;
            }
            .gallary > div {position: absolute; left: 120px !important;  height: 100%; width: 100%;}



            .container {
                width: 1000px;
                position: relative;
                height: 120px;
                vertical-align: middle;
                font-size: 0;
            }

            .image div {
                background-color: grey;
                display: inline-block;
                height: 50px;
                margin: 35px 0;
                width: 50px;
                position: absolute;
                right: -120px;
                transition: right 0.1s linear 0s;
                z-index:10;
            }

            #test-image-one div {
                background-color: pink;
            }

            #test-image-two div {
                background-color: green;
            }

            #test-image-three div {
                background-color: purple;
            }

            #test-image-four div {
                background-color: blue;
            }

            .image:target { right: -120px;}

            .image:target div {
                right: 35px;
                z-index: 20;

            }
        </style>
    </head>
    <body>
        <header></header>
        <section>

            <ul>
                <li>
                    <a class="imageAnchor" href="#test-image-one"></a>
                    <a class="imageAnchor" href="#test-image-two"></a>
                    <a class="imageAnchor" href="#test-image-three"></a>
                    <a class="imageAnchor" href="#test-image-four"></a>
                </li>
            </ul>
            <div class="container">
                <div class="gallary">

                    <div id="test-image-one" class="image"><div></div></div>
                    <div id="test-image-two" class="image"><div></div></div>
                    <div id="test-image-three" class="image"><div></div></div>
                    <div id="test-image-four" class="image"><div></div></div>
                </div>
            </div>

        </section>
        <footer></footer>
    </body>
</html>

Now you might be able to strip it down, but I'm not touching it.

Edited by dsonesuk
Changed to better version which looks spot on
Link to comment
Share on other sites

I managed to slim it out a bit further, but how does that work xD

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Slideshow Test">
		<base href="">
		<title>Slideshow Test</title>
		<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
		<link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/>
		<style>
			* {
				box-sizing: border-box;
			}
			
			html,body {
				background-color: #363434;
			}
			
			a {
				color: red;
				text-decoration: none;
				padding: 4px 10px;
				border: 1px solid red;
			}
			
			.slideshow {
				margin: 35px 0;
				width: 120px;
				height: 120px;
				border: 1px solid red;
				position: relative;
				overflow: hidden;
			}
			
			.slide div {
				margin: 35px 0;
				height: 50px;
				width: 50px;
				position: absolute;
				transition: all 0.5s ease;
			}
			
			#slide1 div {
				background-color: pink;
			}
			
			#slide2 div {
				background-color: green;
			}
			
			#slide3 div {
				background-color: blue;
			}
			
			#slide4 div {
				background-color: fuchsia;
			}
			
			.slide:target div {
				left: 35px;
			}
			
			.slide:not(:target) div {
				left: 120px;
			}
		</style>
	</head>
	<body>
		<header></header>
		<section>
			<a class="slideAnchor" href="#slide1"></a>
			<a class="slideAnchor" href="#slide2"></a>
			<a class="slideAnchor" href="#slide3"></a>
			<a class="slideAnchor" href="#slide4"></a>
			<div class="slideshow">
				<div id="slide1" class="slide">
					<div></div>
				</div>
				<div id="slide2" class="slide">
					<div></div>
				</div>
				<div id="slide3" class="slide">
					<div></div>
				</div>
				<div id="slide4" class="slide">
					<div></div>
				</div>
			</div>
		</section>
		<footer></footer>
	</body>
</html>

My only guess is we are "glitching/hacking" the box model by taking the nested "div" out of the box(model). <-- Decode that gibberish

But hey! It works! I appreciate it. If you are interested on trying to decode why this works, what exactly we are breaking, that be great. :)

Edited by DarkxPunk
Link to comment
Share on other sites

Yes! with mine you create a nested div, exactly same size as parent gallery, You can't position a div outside the gallery parent as overflow:hidden will force it back into the boundary of this parent element and the positioning/margins forces the container element beyond left boundary edge and it becomes difficult to position the small div correctly. By using nested div within gallery, you force the smaller inner div out beyond the overflow: hidden parent, the container and gallery remain at fixed location, so its easier to position the smaller inner div correctly now.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...