[Solved] Css position div under element [closed]

by


When you give an element absolute positioning, you are pulling it out of the document flow, so that it’s positioned relative to its first parent element that is not positioned with the static value (the default for positioning).

What you need to do is have another element that is creating flow that allows you to position the textFull element. This could still be done with absolute positioning, but in the example below, you can see that it’s just left in the normal document. Additionally, you’ll want to set your background image on some other element than the body, so that you can have it fixed and allow for scrolling.

Try running the code snippet in full-screen mode to see the effect.

$(document).ready(function(){
  $('#header').typewrite({
    blinkingCursor:false,
    selectedBackground:"#141414",
    selectedText:"#ffffff",
    actions: [
      {delay: 300},
      {type: 'Hello.'},
      {delay: 1000},
      {remove: {num: 6, type: 'stepped'}},
      {type: 'Weclome '},
      {delay: 1000},
      {remove: {num: 1, type: 'stepped'}},
      {select: {from: 10, to: 16}},
      {delay: 1000},
      {remove: {num: 5, type: 'stepped'}},
      {delay: 1000},
      {type: 'lcome to my site. '},
      {type: '<br>'},
      {delay: 1000},
      {type: "I'm Atanas Bobev"},
      {delay: 1000},
      {remove: {num: 12, type: 'stepped'}},
      {delay: 1000},
      {type: "30 years old."},
      {delay: 1000},
      {remove: {num: 13, type: 'stepped'}},
      {delay: 1000},
      {type: "web designer."},
      {select: {from: 26, to: 47}}
    ]
  });
});
@import url('https://fonts.googleapis.com/css?family=Lobster');

* {
  margin:0;
  padding:0;
  transition:1s;
  font-family: 'Lobster', cursive;
}

html, body {
  min-height:100vh;
  width:100vw;
}

/* Jquery stylesheet */
#jquery-script-menu {
  position: fixed;
  height: 90px;
  width: 100%;
  top: 0;
  left: 0;
  border-top: 5px solid #316594;
  background: #fff;
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  z-index: 999999;
  padding: 10px 0;
  box-sizing:content-box;
}

/* The background image */
#random{
  position: fixed;
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  width: 100vw;
  height: 100vh;  
  background-size:cover;                     
  background-repeat:no-repeat;
  background-position:center center;    
  z-index:-2;
  font-size:calc(1vh + 1vw);
  background-image: url('http://www.caryinstitute.org/sites/default/files/public/images/podcasts/pc_trees_forest.jpg');
}

#an {
  position: fixed;
  background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
  background-size: 7400% 7400%;
  animation: backgroundGradient 400s ease infinite;
  z-index:-1;
  opacity:0.5;
  width:100%;
  height:100%;
}

@keyframes backgroundGradient {
  0% {
      background-position: 0% 83%
  }
  50% {
      background-position: 100% 18%
  }
  100% {
      background-position: 0% 83%
  }
}

.full-pg-center {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* header with typewriter plugin */
h1#header {
  background-color: #ecf0f1;
  opacity: 0.7;
  border: 20px solid #ecf0f1;
  font-size: calc(2vh + 2vw + 1vmax + 0.5em);
  font-weight: 100;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#header > span.blinkingCursor{
  display:none;
}

.textFull {
  font-size: calc(2vh + 2vw);
  background-color: white;
}
<div id='random'></div>
<div id='an'></div>
<div id='jquery-script-menu'>Menu</div>
<div class="full-pg-center">
  <h1 id='header'>Hi. I'm Atanas Bobev</h1>
</div>
<div class="textFull">Lorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit ametLorem ipsum dollarum sit amet</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrvautin/typewrite/master/dist/typewrite.min.js"></script>

These are some of the other things that could affect whether your page behaves properly:

Structural issues in HTML:

  1. Meta-tags belong in the head of your document.
  2. Script tags must be placed either enclosed in the head tags, or
    (preferably) in the body of your page before the closing body
    (</body>) tag.
  3. Only load one version of jQuery (there are two in your demo code). Also, it appears that you’re loading two separate plugins for your typewriter effect.

CSS Issues:

  1. You are trying to style the head element in your CSS. Don’t do that. 🙂
  2. You have a lot of repetitive properties within your rules. This isn’t going to cause a problem (except when they are conflicting) per se, but it will be harder to fix issues and maintain your code. For example, in your rule set for the #random element, you are repeating your background properties twice.
  3. You don’t need to prefix most of the values that you’re prefixing. For example, box-shadow has been supported in nearly every browser since 2010/2011 without prefixing. It’s unnecessary additional code to maintain.
  4. It’s good that you’re using viewport units for much of your sizes, but they are used inconsistently. You should carefully check your site on multiple device sizes, to make sure that you’re getting the result you intended. Additionally, you can probably simplify your font-sizes dramatically. Not sure why you’re setting some of the fonts to 2vh + 2vw for example. Perhaps what you’re looking for are: vmax/vmin units.

You may want to reconsider your animated gradient overlay. The combination of a very complex gradient, the opacity setting, and the infinite animation can be heavy on the CPU. Use the Developer tools in Chrome and test different ways of potentially reducing the impact. You could start by simplifying your gradient (such as reduce it to three colors). I would also try using rgba value for the gradient stops instead of the opacity property. Also, you can try making your background size much smaller.

Best of luck.

solved Css position div under element [closed]