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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="fixed">
  <ul>
    <li>
      <p>1</p>
      <div class="over">はみだすエリア1</div>
    </li>
    <li>
      <p>2</p>
      <div class="over">はみだすエリア2</div>
    </li>
    <li>
      <p>3</p>
      <div class="over">はみだすエリア3</div>
    </li>
    <li>
      <p>4</p>
      <div class="over">はみだすエリア4</div>
    </li>
    <li>
      <p>5</p>
      <div class="over">はみだすエリア5</div>
    </li>
    <li>
      <p>6</p>
      <div class="over">はみだすエリア6</div>
    </li>
    <li>
      <p>7</p>
      <div class="over">はみだすエリア7</div>
    </li>
    <li>
      <p>8</p>
      <div class="over">はみだすエリア8</div>
    </li>
    <li>
      <p>9</p>
      <div class="over">はみだすエリア9</div>
    </li>
    <li>
      <p>10</p>
      <div class="over">はみだすエリア10</div>
    </li>
    <li>
      <p>11</p>
      <div class="over">はみだすエリア11</div>
    </li>
    <li>
      <p>12</p>
      <div class="over">はみだすエリア12</div>
    </li>
    <li>
      <p>13</p>
      <div class="over">はみだすエリア13</div>
    </li>
    <li>
      <p>14</p>
      <div class="over">はみだすエリア14</div>
    </li>
    <li>
      <p>15</p>
      <div class="over">はみだすエリア15</div>
    </li>
    <li>
      <p>16</p>
      <div class="over">はみだすエリア16</div>
    </li>
    <li>
      <p>17</p>
      <div class="over">はみだすエリア17</div>
    </li>
    <li>
      <p>18</p>
      <div class="over">はみだすエリア18</div>
    </li>
    <li>
      <p>19</p>
      <div class="over">はみだすエリア19</div>
    </li>
    <li>
      <p>20</p>
      <div class="over">はみだすエリア20</div>
    </li>
    <li>
      <p>21</p>
      <div class="over">はみだすエリア21</div>
    </li>
    <li>
      <p>22</p>
      <div class="over">はみだすエリア22</div>
    </li>
    <li>
      <p>23</p>
      <div class="over">はみだすエリア23</div>
    </li>
    <li>
      <p>24</p>
      <div class="over">はみだすエリア24</div>
    </li>
    <li>
      <p>25</p>
      <div class="over">はみだすエリア25</div>
    </li>
    <li>
      <p>26</p>
      <div class="over">はみだすエリア26</div>
    </li>
    <li>
      <p>27</p>
      <div class="over">はみだすエリア27</div>
    </li>
    <li>
      <p>28</p>
      <div class="over">はみだすエリア28</div>
    </li>
    <li>
      <p>29</p>
      <div class="over">はみだすエリア29</div>
    </li>
    <li>
      <p>30</p>
      <div class="over">はみだすエリア30</div>
    </li>
    <li>
      <p>31</p>
      <div class="over">はみだすエリア31</div>
    </li>
    <li>
      <p>32</p>
      <div class="over">はみだすエリア32</div>
    </li>
    <li>
      <p>33</p>
      <div class="over">はみだすエリア33</div>
    </li>
    <li>
      <p>34</p>
      <div class="over">はみだすエリア34</div>
    </li>
    <li>
      <p>35</p>
      <div class="over">はみだすエリア35</div>
    </li>
    <li>
      <p>36</p>
      <div class="over">はみだすエリア36</div>
    </li>
    <li>
      <p>37</p>
      <div class="over">はみだすエリア37</div>
    </li>
    <li>
      <p>38</p>
      <div class="over">はみだすエリア38</div>
    </li>
    <li>
      <p>39</p>
      <div class="over">はみだすエリア39</div>
    </li>
    <li>
      <p>40</p>
      <div class="over">はみだすエリア40</div>
    </li>
    <li>
      <p>41</p>
      <div class="over">はみだすエリア41</div>
    </li>
    <li>
      <p>42</p>
      <div class="over">はみだすエリア42</div>
    </li>
    <li>
      <p>43</p>
      <div class="over">はみだすエリア43</div>
    </li>
    <li>
      <p>44</p>
      <div class="over">はみだすエリア44</div>
    </li>
    <li>
      <p>45</p>
      <div class="over">はみだすエリア45</div>
    </li>
    <li>
      <p>46</p>
      <div class="over">はみだすエリア46</div>
    </li>
    <li>
      <p>47</p>
      <div class="over">はみだすエリア47</div>
    </li>
    <li>
      <p>48</p>
      <div class="over">はみだすエリア48</div>
    </li>
    <li>
      <p>49</p>
      <div class="over">はみだすエリア49</div>
    </li>
    <li>
      <p>50</p>
      <div class="over">はみだすエリア50</div>
    </li>
    <li>
      <p>51</p>
      <div class="over">はみだすエリア51</div>
    </li>
    <li>
      <p>52</p>
      <div class="over">はみだすエリア52</div>
    </li>
    <li>
      <p>53</p>
      <div class="over">はみだすエリア53</div>
    </li>
    <li>
      <p>54</p>
      <div class="over">はみだすエリア54</div>
    </li>
    <li>
      <p>55</p>
      <div class="over">はみだすエリア55</div>
    </li>
    <li>
      <p>56</p>
      <div class="over">はみだすエリア56</div>
    </li>
    <li>
      <p>57</p>
      <div class="over">はみだすエリア57</div>
    </li>
    <li>
      <p>58</p>
      <div class="over">はみだすエリア58</div>
    </li>
    <li>
      <p>59</p>
      <div class="over">はみだすエリア59</div>
    </li>
    <li>
      <p>60</p>
      <div class="over">はみだすエリア60</div>
    </li>
    <li>
      <p>61</p>
      <div class="over">はみだすエリア61</div>
    </li>
    <li>
      <p>62</p>
      <div class="over">はみだすエリア62</div>
    </li>
    <li>
      <p>63</p>
      <div class="over">はみだすエリア63</div>
    </li>
    <li>
      <p>64</p>
      <div class="over">はみだすエリア64</div>
    </li>
    <li>
      <p>65</p>
      <div class="over">はみだすエリア65</div>
    </li>
    <li>
      <p>66</p>
      <div class="over">はみだすエリア66</div>
    </li>
    <li>
      <p>67</p>
      <div class="over">はみだすエリア67</div>
    </li>
    <li>
      <p>68</p>
      <div class="over">はみだすエリア68</div>
    </li>
    <li>
      <p>69</p>
      <div class="over">はみだすエリア69</div>
    </li>
    <li>
      <p>70</p>
      <div class="over">はみだすエリア70</div>
    </li>
    <li>
      <p>71</p>
      <div class="over">はみだすエリア71</div>
    </li>
    <li>
      <p>72</p>
      <div class="over">はみだすエリア72</div>
    </li>
    <li>
      <p>73</p>
      <div class="over">はみだすエリア73</div>
    </li>
    <li>
      <p>74</p>
      <div class="over">はみだすエリア74</div>
    </li>
    <li>
      <p>75</p>
      <div class="over">はみだすエリア75</div>
    </li>
    <li>
      <p>76</p>
      <div class="over">はみだすエリア76</div>
    </li>
    <li>
      <p>77</p>
      <div class="over">はみだすエリア77</div>
    </li>
    <li>
      <p>78</p>
      <div class="over">はみだすエリア78</div>
    </li>
    <li>
      <p>79</p>
      <div class="over">はみだすエリア79</div>
    </li>
    <li>
      <p>80</p>
      <div class="over">はみだすエリア80</div>
    </li>
    <li>
      <p>81</p>
      <div class="over">はみだすエリア81</div>
    </li>
    <li>
      <p>82</p>
      <div class="over">はみだすエリア82</div>
    </li>
    <li>
      <p>83</p>
      <div class="over">はみだすエリア83</div>
    </li>
    <li>
      <p>84</p>
      <div class="over">はみだすエリア84</div>
    </li>
    <li>
      <p>85</p>
      <div class="over">はみだすエリア85</div>
    </li>
    <li>
      <p>86</p>
      <div class="over">はみだすエリア86</div>
    </li>
    <li>
      <p>87</p>
      <div class="over">はみだすエリア87</div>
    </li>
    <li>
      <p>88</p>
      <div class="over">はみだすエリア88</div>
    </li>
    <li>
      <p>89</p>
      <div class="over">はみだすエリア89</div>
    </li>
    <li>
      <p>90</p>
      <div class="over">はみだすエリア90</div>
    </li>
    <li>
      <p>91</p>
      <div class="over">はみだすエリア91</div>
    </li>
    <li>
      <p>92</p>
      <div class="over">はみだすエリア92</div>
    </li>
    <li>
      <p>93</p>
      <div class="over">はみだすエリア93</div>
    </li>
    <li>
      <p>94</p>
      <div class="over">はみだすエリア94</div>
    </li>
    <li>
      <p>95</p>
      <div class="over">はみだすエリア95</div>
    </li>
    <li>
      <p>96</p>
      <div class="over">はみだすエリア96</div>
    </li>
    <li>
      <p>97</p>
      <div class="over">はみだすエリア97</div>
    </li>
    <li>
      <p>98</p>
      <div class="over">はみだすエリア98</div>
    </li>
    <li>
      <p>99</p>
      <div class="over">はみだすエリア99</div>
    </li>
    <li>
      <p>100</p>
      <div class="over">はみだすエリア100</div>
    </li>
  </ul>
</div>
            
          
!
            
              #fixed {
  width: 200px;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #eee;
}

#fixed ul {
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-x: visible;
  overflow-y: scroll;
}

#fixed li {
  padding: 1em;
  text-align: center;
}

#fixed li:nth-child(odd) {
  background: #ddd;
}

#fixed li:hover {
  background: yellow;
}

#fixed .over {
  width: 160px;
  padding: 1em;
  text-align: center;
  background: #aaa;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 200px;
  display: none;
}

#fixed li:hover .over {
  display: block;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console