Jump to content
DarkxPunk

Overflow hidden breaks position absolute

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I get it, but my brain still hurts xD

Once I finalize the design and effect ill post it here :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...