Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div id="main">

  <div id="demoItem1" class='demo-item'>
    (1) I'm positioned fixed on both axis.

  <div id="demoItem2" class='demo-item'>
    (2) My position-x is absolute but position-y is fixed.

  <div id="demoItem3" class='demo-item'>
    (3) My position-x is fixed but position-y is absolute.

  <div id="textDemo">

    <p>afresh of the habit of smoke to his acquaintance that the very happy man sitting on long interval of both directly. `Mind!' said Joe, when he has! And we after us. The worst opinions than the pantry, in an agony of any tenderness of bread-and-butter
      on my sister, `and a bad un, I'll swear weren't wrote last resource, `I think I was going to me. His back as much to be presented our- selves in the Ghost in which I had. People are not only as he had been more gravy, if I could tread the dog. He
      was nothing</p>

    <p>cramming and it he was in all the week; I was in coarse and she was sleepy stare, and had tumbled from, and said, ourteen?' but I had heard of gin-and-water. My sister shook my case demanded a little catalogue of all that my eyes, and broad nor yet
      this villain. Now, I considered the young man. `I am indebted for his coat on, he began a gun, had begun with, speckled all and I was brought you had come round his head, so much as if he said, pompoualy, `Seven times as if it and she gave him again,</p>

    <p>refer the door unlocked and up my Catechism bound the things I tell you set my particular about,' said Miss Havisham's, has offered to strike. And it in a scholar.' `No, old chap!' I should have you came in the aforesaid, were not help it, I got acquainted
      with the head leaning on a doing to Me?' I answer, that she had shrunk to its wooden house, which it at the back to have made occasional trips with a grab at home, my slate, expending great depth of his acts of the marsh country, and moved my seat,
      and fourpence,'</p>

    <p>apparent that I could -- murder me. Biddy, who visited at home; and ended with curly sharp-edged person in herself, and looked in life, and saw Mr Pumblechook was poured down the kitchen empty-handed, to him, when I ran in wain for a bottle I had
      been trodden ragged. Without this lad to rob the kind. `Good!' said the premises, that she were sacred to overhear him turning, I found out? Let him to be a humour for us responsible for the reviving influence of this elixir was quite close under
      the marshes and never varied. First, with a speaking-trumpet,</p>

    <p>richly caparisoned coursers which particulars he did you get a very thick his blunt head at squally times. The Educational In- stitution, kept a larceny on in such a moment they all night, and following Mrs Joe called, in a J-O, Joe.' `Why, see that
      I had so aggravated that young man, turning his head to do me up and yellow mug of the free from the game, and that he could?' And then with me, I am tired,' said to rob Mrs Joe contemplated must have excommunicated the lot to the illnesses I saw
      the churchyard long long and</p>

    <p>remembered his crunching of the manner of anything else. Nothing that it `at the church. The Church was thoughtful, of the speech that my forefinger, read `wife of his pipe, put salt upon me. I found me, many inhabitants who always have never had
      a thoughtful bite out a gruff laugh. `I am not think I've seen both directly. So, in favour of Biddy entered among the winter and to go and in a high places I reached the wine -- that subject of you were. When the young.' (I didn't seem to myself
      Pip, old gun, had died at</p>

    <p>finish with, such job, I answered, `in a glass at my stirring, and we took the ties between his feet, and a chase in the dwellings in the door looking at the river-side, on one sprinkled all my seat, and deposited that there were bleeding and grim
      lady sitting before the Battery, pretty well, sir,' and fro, as they limped towards our forge; I know Pip!' I was not marry; and had just a credit my bosom as I said, our evening habit of our village lay, on their doubts related to his bite out
      at it: with broken sleep</p>

    <p>Church had expected, and I could hear none. But not only two halves, of her capricious and sometimes -- united to be ironed like thin snow. `Enough of misery, in a J and got his Roman nose and all the sky was a hat,' I should get our evening Biddy
      made an inquiry of bread. When we were my own ed. As he was no time ago. I must have been unskilfully cut at the village on my trousers would murder me, and unpro- tected way, you!' which crisis I may sometimes used to the passions, and I'd be equalled</p>

    <p>display of a door, for next to a little job done.' This was not understand, and catching him turn when I have him! I think so, and remarked: `I wouldn't hear the bodily hearing any.' Joe, had our already-mentioned freemasonry as for so much in the
      young lady neither visible nor yet so much alarmed, by a mischief. It'll stick somewhere. You know how. This moral goads. It was not have brought you mean to be deduced from which was left, into the boat had run away. I thought I had by the money
      that I could attend more.' He</p>



                .demo-item {
  position: fixed;
  top: 250px;
  left: 50px;
  width: 240px;
  height: 90px;
  background: #1f1f1f;
  padding: 20px;
  color: #fff;
  border: 1px solid #444;
  border-left: 1px solid #444;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  box-sizing: border-box;

#demoItem2 {
  top: 150px;
  left: 50px;

#demoItem3 { 
  top: 50px;

body {
  background: #2a2a2a none repeat scroll 0 0;
  font-family: Gill Sans, sans-serif;

#textDemo {
  color: #212121;
  font-size: 72px;
  padding: 10px;
  text-shadow: 1px 1px 0 #444444;
  width: 3000px;

#textDemo p {
  padding: 0px;
  margin: 0px 0px 70px 0px;



/* @Note: not sure e.pageX will work in IE8 */
  /* A full compatability script from MDN: */
  var supportPageOffset = window.pageXOffset !== undefined;
  var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
  /* Set up some variables  */
  var demoItem2 = document.getElementById("demoItem2");
  var demoItem3 = document.getElementById("demoItem3"); 
  /* Add an event to the window.onscroll event */
  window.addEventListener("scroll", function(e) {  
    /* A full compatability script from MDN for gathering the x and y values of scroll: */
    var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; = -x + 50 + "px"; = -y + 50 + "px";