How to push elements after absolute element
Tags: html,css,css-position
Problem :
I am trying to display all of an element's children after itself. I have a <div>
wrapped in a <section>
that has position: absolute
and its top
, right
, bottom
, and left
are all 0. After that <div>
, I have another <div>
wrapped in a <section>
. That div just has a <h3>
with a <p>
under it.
This is the HTML code:
<main>
<section class="fullscreen">
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Link</a>
</div>
</section>
<section>
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
...and this is the CSS:
main {
clear: both;
}
main section:nth-child(1) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -10;
}
main section:nth-child(1) div.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
margin: auto;
}
How can I display the page like this, without defining a margin after the .fullscreen
?
Solution :
From your code it appears that you want the section
elements to take up the full screen height.
You don't need positioning to do that. Viewport units now have excellent support and you can just allocate the height to be 100vh.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
main {
clear: both;
/* not required there are no floats */
}
main section {
height: 100vh;
border-bottom: 2px solid red;
}
main section div.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
<main>
<section class="fullscreen">
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet</p>
<a href="#section2">Link</a>
</div>
</section>
<section id="section2">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
CSS Howto..
I believe this is due to padding. Without a jsfiddle or anything I can't really tell though. Try this: #mainvideo{ width: 960px; height: 500px; float:left; margin-top:10px; background-color:#75A96F; padding: 0; }...
You can edit the css file directly with php function fwrite. Is that what you are looking for ?
So, you want to know what's happening, huh? absolute positioning aligns the element "on top of" the parent who has a relative position. So, placing your square like: +-----+-----------------------+ |XXXXX|...
You can add extra wrapper and set position: relative and overflow to different wrappers: HTML <div id="base"> <div id="container"> <div id="popup">Popup Text</div> </div> </div> CSS #base { height:50px; width:50px; position:relative;...
I would suggest throwing different colored borders on your elements in your @media print css file. This is always useful in debugging layout issues and should show up in the...
text-decoration does not behave the same as other font/text related styling like font-weight. Applying text-decoration will affect all nested elements as well. Check this out: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration Excerpt: Text decorations on...
You want to use div.footermenu li.expanded > a:first-child jsFiddle http://jsfiddle.net/eRTV6/ div.footermenu li.expanded > a:first-child { font-weight: bold; } Your original selector will select all anchor elements which are first-children of...
You can try this: .col-md-4 { position: relative; } .col-md-4 span { position: absolute; top: 0; } .col-md-4 span:last-child { top: auto; bottom: 0; } Working demo...
First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements. Try with this CSS #menuBox, #menuBox ul{ /*reset ul...
You can use T4 templates. They can generate any text file based on the template that is written as a mixture of plain text and C#.
You could do this background: url(repeat_bg.png) repeat-y, url(repeat_bg_right_side.png) top right repeat-y; ...
You need to center align the image. I see you tryed to do it with margin 0 auto, but you need a fixed size for that. And we dont know...
It is fundamentally impossible to do that. LESS compiles to regular CSS. Any behavior that cannot be expressed in CSS also cannot be expressed in LESS. In particular, the LESS...
I don't think what you are trying to do is possible. Please see here: Insert a Link Using CSS for some Javascript workarounds which may help.
I don't know if this is the most efficient way, but adding reverse keyframes and toggling classes seems to work. codepen example #path1.active { animation: line 1.5s forwards; } #path1.inactive...
Question 1 Bind the events after popover content be loaded, using event shown.bs.popover: $('#mapbutton').on('shown.bs.popover', function () { $('#mapMinus').click(MyMap.ZoomOut); $('#mapPlus').click(MyMap.ZoomIn); $('#mapLeft').click(MyMap.GoLeft); [...] }) ** UPDATE: Creating your own "popover", by reusing...
You want the view to listen to changes on the model. See Backbone listenTo. Untested code, but something like this should do it: model: var resultEntityModel = Backbone.RelationalModel.extend({ defaults :...
Have a look at jQuery UI's Resizable.
I figured this solution out: #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{ display:none; } #menu li:hover ul, #menu li li:hover ul, #menu...
Add the background color to the parent div to fill in the gap Place the border-radius on the parent div to create the two rounded corners Move the :before...
A LESS 1.4 Answer At the time of initial answer, I had not resolved if there is a way to do this in LESS 1.3.3 (but later did, see update...
You won't, and shouldn't, use !important. You just need to properly override following the principles of CSS specificity and inheritance. Explanation of CSS Inheritance For example--let's say your 'unwanted' button...
EDIT I think I figured out what you're trying to do now. You do need to move the transition property onto the on and off classes as I'd suggested earlier:...
Add an ID to the ad: currently i have added adblock <div id="leftcolumn"><div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="http://results.htm">Results</a></li> </ul> <p id="adblock"> <script...
this question has some good answers. this one works without counters. Add an inner span with a different color. <ol><li style='color: red;'><span style='color:black;'>test</span></li></ol> ...
I understand that you want something like this. .tag { background-color: #EEF; /* Set the background color */ border-radius: 3px; /* Add some roundness */ border: 1px #CCF solid; /*...
Remove the fill from the def and use apply to to the use. .hidden { display: none; } .box { width: 100px; height: 100px; margin: 1em; } .green { fill:green;...
Modernizr works by creating an element, applying a css property and then checking the return value of the css property. For example, if you wanted to test for text shadow...
you may use mix-blend-mode and eventually the other pseudo : DEMO #star8:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; transform: rotate(135deg); box-shadow: 0 0...
You can make this using pure css.(Quite easy and simple way which supports all browsers). HTML <div class="container"> <span class="arrow-left"></span> <span class="arrow-right"></span> </div> CSS .container{ width:60%; height:40px; background:#ccc; margin:100px auto;...