FAQ Database Discussion Community


relative positioning with transition effect

css,css3,css-position,css-transitions
I have six boxes with caption. I want caption to slide in up on mouse hover event. I am facing two problems while doing this. If I use position:absolute, Figure captions would have lost their center alignment. If I use position:relative, Figure captions would have became center aligned but they...

Bootstrap container with position:absolute loses layout inside

css,twitter-bootstrap,css-position
I am developing website against latest Bootstrap version 3.3.2. My task is to create navigation, that is positioned on top of other content (simple roll over menu on hover). For this menu I want to use Bootstrap columns. To position .container-fluid on top of other containers, I need to remove...

A wide position:fixed element won't stay inside scrollable container

html,css,overflow,css-position
I have a very large table with a position:fixed header that stays at the top of the page when you scroll down the page. I've been trying to enhance this by putting the table inside of a reasonably-sized width container with overflow:auto but the fixed container extends outside the div....

css positioning to mimic html table

html,css,css-position,multiple-columns
I am working on a project there I want to display data in 2 columns. Each column would contain a heading that I am trying to position on the left of the column and some data that would be positioned next to the heading (right side of the column). The...

Vertically center with variable height

html,css,css-position
I have the following problem: I want to center some text vertically. I know, that's not difficult, but I need it to be centered without knowing the height of any of my elements. The height vary that much that I can't give it a certain height. My HTML DOM: <div...

Absolute positioned item in a flex container still gets considered as item in IE & Firefox

css,css-position,flexbox,absolute
If I have multiple elements with the property justify-content: space-between in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here: This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as...

Stretch a block element to fill 100% vertical scroll height of its parent element

html,css,layout,position,css-position
I have a layout with a vertical scroll. One of the child elements within the scrollable div is absolutely positioned with a large top value, inducing a vertical scrollbar on the parent. The scrollable parent div also has some child div elements (lets call them pillars) positioned horizontally adjacent to...

Getting Elements positioned correctly

html,css,position,css-position,z-index
I have beat my head on this for over an hour and I need your help, I am creating a web form and I am having the most difficult time getting these shadow elements pushed behind the form and not the container. I have tried giving the .form class div...

Position fixed relative to fixed parent

html,css,css-position
I have a fixed positioned DIV called Lightbox. My problem is that the close button doesn't stay on the top right, when I scroll the content. How can I achieve that the close button stays on the top right corner? Fiddle Link .lightbox { position: fixed; background: white; top: 50%;...

CSS Positioning: Same width in percent, but one div seems to get smaller

html,css,css-position
So I have a problem and hope you could help me out here for I am out of ideas: I try to create a html/css-based bill of fare (I hope it's right... perhaps "menu" is better english? sry, german here), and it worked out fine so far, but there's one...

fixed VS absolute positioning for scrolling

html,css,css-position
I was just playing around with some CSS absolute and fixed properties and came across a unusual difference between absolute and relative positioning in CSS. Basically, when I absolutely position something and the content is more than the height of the window or containing element, the scroll bar appears, but...

Center H2 slightly above it's parent div?

css,css-position
I am trying to position a styled heading to be centered and to sit slightly above it's parent div. I assumed the heading would have to be absolutely positioned to be able to be shifted outside of the parent by adding a negative margin to the top. I can center...

Is there a way to position a div directly in the center of it's parent?

css,css-position
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this: #box { width: 50%; #text {position: relative; margin-left: 48%;} } This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text...

Position element without using absolute positioning

html,css,css-position
I have the following requirements: a <p> element filled with text a <img> element the coordinates (x/y) where to position the image Now I want to position the <img> element according to my server side calculated x and y pixel values. I do not want to use position:absolute because I...

Aligning overlayed divs in bootstrap

css,html5,twitter-bootstrap,css-position
My first question here :) I decide to copy recreate this front page: www.liveform.pl in order to practice my fresh skills on the battlefield. Here's my starting page: http://donkey.ninja/lf/ I'm having hard time aligning the red box with triangle, which are respectively a div(rectangle) and a p(triangle), that look like...

fixed sticky header expanding

javascript,jquery,css-position
I have the following issue. Trying to make a fixed header always on top. The page is responsive and when the screen is small the header if clicked expands pushing down the content... my issue is that I can't find the solution to make it work.. either I put position:fixed;...

CSS Layout with Separate Fixed, Scrollable Content Regions

css,css-position,scrollable
Struggling to achieve my desired functionality in my CSS layout. Based on this basic structure https://jsfiddle.net/606ep8g7/6/. I'm trying to get the following pieces to work together: <body> <div id="A"> <div id="A1"> </div> <div id="A2"> </div> <div id="A3"> </div> </div> <div id="dragbar"></div> <div id="B"> </div> </body> 2 containers: #A and #B...

position absolute div from middle instead of edges

css,css-position
I have an absolutely positioned div of variable width that I want to position to be at a certain x position within the parent (relative) div. I can do this by setting left: 50px however I want the element to be centered on the 50px mark, instead of having its...

Creating a CSS 'path' on hover

jquery,css,css3,css-position,css-transitions
I'm trying to generate a 'nice' CSS menu using (mainly) CSS, but with a tiny bit of jQuery as well: My overall idea is: +------------------------+ | | | | | +---+ | | | | | | |___| | <-- Hover this center piece | | | | | |...

center one div above two other divs

html,css,css-position
I would like to achieve this situation: The page contains 4 divs in total. The main layer is divided in 3 divs. Above div1 and div2, another div(div4) must be floating above them in the middle of these 2 divs. current code: body { position:relative; } div1 { // nothing...

How to position heading (h1) placed on a background image and centered according to it outside of its container

css,html5,css3,responsive-design,css-position
In a desktop version I have a background image and h1. H1 is centered according to the image and below I have some content. I've created codepen to visually describe (I used color placeholder instead of an image) - what I have <div class="container"> <h1>Lorem ipsum dolor sit amet.</h1> </div>...

how to make a div stay in a div

html,css,css-position,game-physics
I'm making a pong clone using HTML/CSS/Js. I've set a div element to act as a border for the game, just to keep things in a confined space. How do I get elements (for example, a scoreboard) to act relative to their parent element? For example, if I tell the...

How can I keep things aligned in an adaptive layout

css,css-position,adaptive-layout
I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://www.spabc.com/drupal/ now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width...

Need to align a button under an image with a text at their right

css,alignment,css-position
¡Hello! I've looking for some questions like this, but i only found this one, and its solution is useless for me. I have a website where some books are shown, it is edicionesparalelo.com, and another one where people can buy those books: tienda.edicionesparalelo.com I'd want to put a button under...

Elements with position: relative with SVG clip paths not displaying in Safari

css3,svg,safari,css-position,clip-path
I have a web page in which I am using an SVG clip path applied to one of the page's HTML elements. SVG element: <svg height="0" width="0"> <defs> <clipPath id="clip"> <path d="M150 0 L75 200 L225 200 Z" /> </clipPath> </defs> </svg> HTML element the clipping path is applied to...

div position fixed re-size behaviour

javascript,jquery,html,css,css-position
I have fixed menu on my site which works without any issue. I have a container(not bootstrap) which will be fixed when makes contact with the static menu. Everything is work as expected except when I re-size the window the container goes to sort of absolute position with 0 top....

debug lag of calculate margin top for Position fixed sidebar scrolling to bottom

javascript,jquery,performance,twitter-bootstrap-3,css-position
I want to fix left sidebar on the responsive view. I use Margin top (dependency with scroll position) for wrapper of sidebar! that's work! but on the some browser it's slow motion (example: macbook pro retina 15" 2014 chrome Version 42) jsfiddle jQuery(function($){ var target = $('#fixed_sidebar .fixed'); var sidebarPosition...

Why is position absolute rendered above position static?

html,css,css-position
I have a simple absolute div and another normal div coming behind. Why is the absolute div rendered above the other? I know that I can fix it with z-index - But what is the reason? JSBIN: http://jsbin.com/yadoxiwuho/1 <style> .with-absolute { position:absolute; top:0px; bottom:0px; background-color:red } .other { background-color:yellow; }...

How to fix specific div's position in CSS

html,css,css-position
I want to fix position of my divs like this: so I did this code (note that div's order in HTML is reverse) <div id="content"> <div id="area"> <div id="bottom">bottom</div> <div id="middle">middle</div> <div id="top">top</div> </div> </div> and css code (colors aren't important) #area{ position:fixed; right: 10px; bottom: 10px; border: 2px solid...

Different result of fixed element CSS in Chrome and Firefox

html,css,google-chrome,firefox,css-position
I have this html: <div class="lightbox"> <div class="lightbox-content-wrapper"> <div class="lightbox-content-inner-wrapper"> <div class="lightbox-content"> <!-- Popup Form --> <div class="lightbox-form-wrapper"> Test </div> </div> </div> </div> </div> and this CSS: .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; background: rgba( 0, 0, 0, .7 ) repeat; }...

Get footer at bottom of div

html,css,css-position
I have a div that I would like to put a fixed position footer on. It's very simple and light. When I add the bottom: 0px; position: fixed; to keep it at the bottom of the div, it goes to the bottom of the page and it's not even fixed....

How to allow list positioned absolute, to break out of fixed element?

html,css,css-position
http://codepen.io/leongaban/pen/ZGywrV?editors=110 I have a list which items will be scrollable left and right inside of a column. However the column has a position of fixed, which is not letting my items break out of the tag-column div. Currently it looks like this: I want it to look like this: So...

How to absolute position an element with percentages?

css,css-position,absolute
I have an element that I'm trying to absolute position to the center and right near the bottom. Whether I do 50% from right or left, seems to be slightly off center. In this screenshot you can see that it's a little to the left from center. a.down { font-size:70px;...

Position absolute box causes container to collapse

html,css,css-position
I have 2 divs with position:absolute inside a container with position:relative. I am trying to display the first div .box1 while hiding the second div, .box2, using absolute positioning. I can see with the border around the container that it is collapsed but I am not sure what I'm missing...

Starting a css site but format issues [closed]

html,css,css-float,css-position,css-transforms
The link of the site is here progerdevs.co.nf just a test site. When I load the page on my android it is displayed horribly, everything is all over the place. Does anyone know what it is called so it changes when theres a different screen size? I still have a...

position relative css tricks

css,css-position,relative
I am a new web designer so I decided to analysis other HTML,CSS codes. I found a weird thing. Why should some developers use position: relative without any top,left,right,bottom? Is there any hack or trick in it? like this: .main { position: relative; margin: 0; overflow-x: hidden; } ...

How to suspress the position: relative when using translate

css,css3,css-position,transform
it seems that using transform: translateY(1px); also causes the element to gain an extra position: relative;-behaviour. Is there a way to suspress this? Here is a example on codepen.io. I would like to position the whitebox absolutely to the green one, not the parent (red) one....

on scroll moving the content div and then fix its position at bottom

jquery,scroll,css-position
I have a two column layout, where the sidebar's height is greater than the content thus leaving white space on bottom.... I want the content div to stick at bottom once full content is revealed while scrolling. My content div is inside a wrapper div Here is the live test...

Fixing position of one column with Bootstrap

html,css,twitter-bootstrap-3,css-position
The page I am designing has a fixed header and in the row below it is has two Bootstrap columns, .col-md-2 and .col-md-10. I am trying to fix the header to the top of the page and the left column (.col-md-2) in the row below it to its position, however...

Element top margin doesn't seem to change

html,css,position,css-position
I have some text, and beneath it a button. No matter what I change the top margin to, the button still sticks to the bottom of the text. I am trying to leave a small gap between the text and the button. Here is a Jsfiddle: http://jsfiddle.net/24bk2t78/ @import url(http://fonts.googleapis.com/css?family=Nunito:300); .homethree...

Parent div not expanding with children, why not?

html,css,responsive-design,css-position
My parent div is not expanding to hold the height of its children. I read that: position: absolute; float: any; Both ruin this. The thing is that the div that does hold absolute elements does expand, but the div holding this, position: relative;, div is not expanding. I'd add a...

Change CSS positioning method responsively, for only one axis?

css,twitter-bootstrap,responsive-design,css-position
Hopefully these images I've prepared will explain sufficiently the challenge I've encountered. In a responsive Bootstrap layout I'm working on there is a main content container and three follow-up paragraphs lined up below it. Each paragraph has a call-to-action button below it. The mobile alignment looks good, as they are...

How to prevent css hover effects executing before you reach the element with your mouse?

jquery,html,css,css3,css-position
Codepen example: http://codepen.io/anon/pen/Bydgyo What I want to achieve: when hovering over one quarter of the circle, give that quarter an opacity 0.6. however, that ".home-menu__quarter" div is set to 'position:relative' in order to keep the text over the image. <div class="home-menu__quarter home-menu__quarter--1"> <p>text1</p> <img src="http://i.imgur.com/KJg9cRl.jpg"/> </div> #home-menu .home-menu__quarter{ height: 50%;...

Horizontal scrolling + scrollbar

css,css-position,horizontal-scrolling
I want to build a page, where a certain DIV element in the middle of the page is horizontally scrollable (big width + overflow-x: scroll). The scrollbar will show up at the bottom of this DIV. Is it possible to show a scrollbar at the very bottom of the page...

How to fixed image on every screen resolution?

html,css,layout,css-position
I am looking for assistance on how to keep an image to fit the whole screen on any screen resolution. However the image is not the background. It is just a cover photo and when scrolling down once you will being to view website content. An example would be this...

Fixed element—text won't go to second line

css,css-position
See here: https://www.invigorlaw.com/practice-areas/securities/ at a width of 1100 pixels or there about. Panel on right side of screen looks good until you scroll down, then text goes from multiple line to one line and you can't see all of the text. Only difference between elements I can tell is the...

scrolling horizontally with fixed left div

javascript,jquery,html,css,css-position
I'm looking for a way to scroll horizontally in a div view, with on the left a sidebar that is fixed. So when there is scrolling (horizontal), everything disappears behind this sidebar. To illustrate: I do not know how this can be done precisely. Can this only through CSS or...

CSS div span position text overlaps

html,css,css-position
I'm having an issue positioning multiple relative divs, when the text overflows: Ideally it should look like: With the right '-' vertical allgined center on the div, and enough space for the text to break without overlapping, all of this wihtout using any fixed sizes. I've managed to isolate the...

Is it possible to apply position: sticky to or element?

css,css-position,html-table,sticky
Is it possible to apply position: sticky to <thead> or first <tr> tag to make table header stuck at the top of viewport while scrolling the table body?

Dropdown Menu shifted to the right

css,css-position
I have a dropdown menu that is working well except for one minor bug that I cannot solve. The first dropdown menu item appears normally. However, the second dropdown menu item is shifted slightly to the right. I am guessing that the margin-right that I set to the link caused...

IOS8: whole page scrolls down when input in fixed footer gets focus

html,ios,css,css-position,fixed
I have a problem with a fixed footer with an input field inside. The example you can find on http://dfitness.com.au/ page.The footer appears when you scroll down a little. Then if the input in the footer gets focus the whole page scrolls down. Why it happens? How to fix it?...

Footer won't stay bottom and usually come over the content

html,css,css-position,footer
I know that this question has been asked around 1000 times but this time its different Goto this link by Clicking Here to see it live and click on header to add content maybe 20,30 times and the content will get below the footer what I want is to get...

Child div will not over-lap parent div with a z-index added

html,css,position,css-position
I am having issues getting my viewproductbutton to go overtop of it's parent div. I have added a z-index to the element and have tried to position it with position: relative; and position: absolute;. Nothing is getting it to position in the top right corner as I want it. Here...

Is it possible to grow a div if it has relative position element?

html,css,css3,css-position,autogrow
For every element inside a div it grows it's width , however when we placed a positioned element , here the error message is positioned to relative and has top of 3px. As it is showing container isn't growing. If I use overflow: hidden; /* the message will be cut...

div below another absolute positioned div

html,css,css-position
I have problem with a div below another div which has "position: absolute". I need to make footer appear UNDER container div but now footer is appearing somewhere behind container. Screen: (div with green background is footer) HTML: <div class="horni-panel"> <div class="logo"> Zhlednuto.cz </div> <div class="menu"> Home, about atd. </div>...

CSS Overflow:auto hiding absolutely positioned child elements that exceed parent size

html,css,overflow,css-position
I have a DIV that will be the width of the page but the contents may be too wide to fit. I've set up overflow-x:auto for it so that the contents are scrollable. My problem is that I'd like to make each of the child divs expand and be visible...

Using position fixed with content that uses absolute and float:left

html,css,css-position,absolute
I'm using a sidebar menu that uses position fixed and slides out from left to right using JavaScript. This works ok apart from one page that is being troublesome for me. The troublesome page contains the fixed side bar and content to the right that contains absolute positon and floating...

Container hidden behind other container

html,css,css-position,containers
I am pretty sure this is a positioning issue, but unfortunately positioning is my weakness. I have a container with a jquery image slideshow in it. The images in the slideshow have to be {position: absolute;} or else they will just display one after the other down the page. Unfortuntely,...

absolute positioned div images overlapping

html,css,image,css-position,absolute
I am trying to put together a social-media bar for a website and am using images as the links to each. I have an animation set for each image and for the animation to work properly, the img position needs to be set to absolute. The problem I am running...

How to properly apply a css hack for IE11 transition misbehaviour

css-position,css-transitions,internet-explorer-11,revolution-slider
I am experiencing elements transition misbehaviour into my page, IE(11) only; The fullscreen revolution slider, remain in place doesn't move with the wrapper when the left slider is opening (clicking on info+ button like we have in Chrome/Firefox). Thanks to @afelixj, I've tried to use this css hack for IE...

Combine the background image position in the element with position in the image sprites

css,css-position
I have an element (h3) and I want to set background position to the right, it's easy: background: url('/images/icon-popular.png') no-repeat right center; But I want to use .png file where I have a lot of other icons (Image Sprites), usually I do: background-image: url('/images/icons-info.png'); background-position: 0 -110px; How can I...

How to set div absolute position from the parent div

css-position
I need to output a number of divs that contain child divs that are poistioned absolutely: <div class="parent"> <div class="child"> Some content 1. </div> </div> <div class="parent"> <div class="child"> Some content 2. </div> </div> <div class="parent"> <div class="child"> Some content 3. </div> </div> .parent { position: relative; margin-top: 50px; }...

How can I change the offset parent of an absolutely positioned CSS element?

css,css-position
By default, an HTML element whose position is set to "absolute" will be positioned relative to the browser's viewport. But if one of the element's ancestors is set to a non-static position, the element will be positioned relative to that ancestor. That ancestor is the element's "offset parent". The problem:...

How to position a fixed div under another fixed div?

html,css,css-position
I am trying to set a fixed div div(menu) directly under another fixed div (header) and the positioning should also work with different screen sizes. I call the "menu" div through JQuery with toggle and it appears under the "header" div. I can do this setting a fixed top value...

td positioning within tr

html,css,position,css-position
I have a table which has multiple <td> elements. I need the elements to be part of the <tr> but a split on 2 lines: Example: <tr> <td>1</td><td>2</td><td>3</td><td>3</td> <td>5</td> </tr> The goal I want to achieve is that 1,2,3 and 4 are on one line and 5 will be under...

Float image outside of parent container

css,image,css-position
Firstly, I know this may seem like a duplicate of Positioning child content outside of parent container, but this is slightly different. I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the background-image set. Example of code used to...

Absolute positioning error in Internet Explorer 11

css,css-position,internet-explorer-11
I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11. Here is the HTML, with the unnecessary parts stripped out: <div class="container"> <div class="page-content"> <div id="corner"></div> ... page contents here </div> </div> And here is the CSS: .container {...

Trying to hide fixed navigation bar behind cover image while scrolling with z-index

css,css-position,z-index
I have 2 navigation bars, 1 is fixed other is not. After the fixed navbar comes a cover image. And i want the fixed navbar to be behind it until it ends. But when i used z-index: -1; then i won't be able to click on it afterwards... And if...

LESS - Mathematics to set position

html,css,less,css-position,fuelux
Is there anyway that I can code classes in less so that each element with the same class will minus 56px from the previous sibling? An example of my code so far is below: .complete { position:absolute &[data-step="1"] { left:-725px; } &[data-step="2"] { left:-669px; } &[data-step="3"] { left:-613px; } &[data-step="4"]...

centering absolute div horizontally in relative table cell

html,css,css-position
I have a table with table cells. In those table cells, i want to display an absolute positioned div. The div has a fixed top and bottom, and i want it to be displayed in the center of the table cell. Here is my code so far: table { width:...

Relative Element with auto-height

html,css,height,css-position
I want to auto-high my relative positioned Div and don't want to use "overflow: scroll/auto". I just want to increase my Div's height when the Childelement needs the space.. #content { position: relative; background: red; z-index: 1; right: 0px; width: 100%; color: rgba(58, 58, 58,1); height: 560px; } #content p,...

How to fix an image compared with another one in CSS?

javascript,html,css,css-position
http://tree-leaves.comuf.com/ In this website, I want to fix the leaves position just over the branchs of the tree in spite of resizing the window. For this, I used percentage in the CSS positioning, but when I resize the window, I can see that the leaves aren't perfectly aligned with the...

CSS Positioning: wrapping text inside a modal

javascript,html,css,css-float,css-position
A relatively (I hope) simple question about CSS that I'm clearly just not getting. I have a modal on my page with the following style definition: .modal { position: fixed; width: 86% !important; left: 7% !important; height: 86% !important; top: 3% !important; background-color: #ffffff; border-radius: 5px; text-align: left; margin: 10px;...

When to use position absolute vs position relative when vertically aligning with css

html,css,css3,css-position,vertical-alignment
Originally I followed this article which used position: relative on the child element: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ http://codepen.io/anon/pen/KpWKWg But I couldn't get it to work on my code for the life of me: http://jsfiddle.net/ge77ma0e/ Then I found these instructions which use position: absolute on the child element: https://css-tricks.com/centering-css-complete-guide/#vertical-block-unknown http://codepen.io/chriscoyier/pen/lpema And when I tried...

Why are these images moving positions when I drag the window to different sizes?

html,css,css-position
I am building a website for a client and I am struggling with some images that are moving positions as I move the window screen to different sizes. I want these images to stay exactly where they are. Here is the code. The ** refers to the pictures that are...

Fixed position misbehaviour in IE11

css,internet-explorer,css-position,css-transitions,internet-explorer-11
I am experiencing elements position misbehaviour into my page, in IE(11) only; live link here. The logotext, the menu and the left sidebar text, remain in place doesn't move with the wrapper when the left slider is open (clicking on info+ button). I've read about position: fixed + transition in...

Center a div with dynamic width in a parent where the width can be bigger than the parent

html,css3,css-float,css-position,margin
Okay I hope I can make clear what I need. I have 5 Divs: a wrapper, div 1, div 2, div 3 and div 4. HTML: <div id="main"> <div id="one">1</div> <div id="two">2 <div id="four">4</div> </div> <div id="three">3</div> </div> CSS: #main{ height:200px; border: 1px solid red; float:left; } #one{ min-width:100px; max-width:200px;...

Better way to put several shapes in the right places

css,position,css-position
I was trying to make a crystal bar by using CSS. Here is a JS Bin The 3 shapes would be misplaced according to the different resolution of display. I've met so many times of putting shapes in the right places. Is there a better way to manipulate the place...

How to make this div appear outside of a container with overflow-y:auto?

css,sass,css-position
http://codepen.io/leongaban/pen/waMpwZ I'm building a hover div to be used in an Angular directive. This hover div appears anywhere there is a tag button. Currently my problem here is when the tag button is inside of this tag-column with the property overflow-y: auto; The hover appears stuck inside the column. I...