Position Fixed Not Working for Header

position fixed is not working

you need to give width explicitly to header and footer

width: 100%;

Working fiddle

If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.

Position Fixed Not Working for Header

At the moment, Chrome cannot render position:fixed on elements under a transformation. Delete the (content-free)

-webkit-transform: translate3d(0, 0, 0);

and it will work.

Position: Fixed; Not working properly

Try adding top: 0; To your header id in the css file. As your header does not know where to be placed. This will make the distance from the header to the top of your page zero, hence solving your issue

#header {
    background-color: red;
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 10;
    top: 0; <-- 
}

CSS position:fixed is working for the header but not for the footer

#notificationFooter {
   background-color: #e9eaed;
   text-align: center;
   font-weight: bold;
   padding: 8px;
   font-size: 12px;
   width: 384px;
   border-top: 1px solid #dddddd;
   position:fixed;
   bottom: 0px;
} 

add "bottom: 0px" to pull your element with fixed positioning to the bottom of the page. :) Side note: left, right & top can also be assigned a pixel value! eg "top: 5px"

Z-index not working on div on fixed position header

You have to use position: fixed also on the instruction box, with according position settings. (relative will put it into the document flow, thereby taking up space, and absolute won't work since you don't have a relative parent for it.)

header {  width: 100%;  display: inline-block;  background-color: #ef4023;  position: fixed;  z-index: 10;}
header #Guide {  width: 100%;  z-index: 15;  margin-right: -1px;  position: fixed;  top: 110px;  left: 0px;  background: #eee;  border: 1px solid #ccc;}

<header>  <div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">    <div class="logo">      <img src="images/logo.png" alt="logo" class="img-responsive" />    </div>  </div>  <div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">    <div class="col-md-6">      <!--SearchBarStart-->      <div ng-controller="MyCtrl">
        <form>          <h3>Search Here </h3>

          <input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
          <div class="list-group" id="Guide" ng-show="showLinks">
            <a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">              <div class="input-group">                <span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>              </div>            </a>          </div>
        </form>      </div>    </div>  </div></header>`

Position fixed is not working in any browser

This is due to transform: translate3d(0, 0, 0); on the parent <div class="off-canvas panelwrap" role="panel-wrap">. Take a look here to fix problem : 'transform3d' not working with position: fixed children

Why isn't my margin working with position: fixed?

i think you have to explictly declare the position of fixed div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

and assign margin at the content div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

check this fiddle if works like you need:
https://jsfiddle.net/0cmvg92m/3/

---

Related Topics